Team Member Scroller

Team Member Scroller

About Team Member Scroller

A dynamic Framer component that maps vertical scroll to a horizontal team showcase using GSAP. It features a velocity-based parallax skew, immersive modal overlays, and cinematic video lightboxes, all while maintaining a lightweight design-time experience.

Key Features

  • Scroll & Skew Dynamics: Translates vertical input into horizontal movement. Cards feature a velocity-dependent parallax skew that mimics motion blur/stretch, auto-resetting when movement stops.

  • Immersive Overlays: Uses GSAP-powered clipPath transitions to reveal profiles. Includes scroll-locking to prevent background jitters and built-in support for social media linking.

  • Smart Media Handling: Supports local and YouTube videos. Playback is managed by IntersectionObserver to preserve battery, with auto-muted initialization to comply with browser autoplay policies.

  • Flexible Presentation: Choose between a detailed Profile Embed (split-screen or text-on-media) or a focused Cinematic Lightbox for a distraction-free viewing experience.

  • Designer-First Build: Uses component memoization and static rendering detection to ensure the Framer editor remains responsive while handling complex animations and media assets.