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.
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.
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.
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.
