Elastic Stack Cards
Stacked cards that fan out with elastic spring animations. Hover-triggered full-width fan with click-to-front selection and scroll-scrubbed spread.
About This Effect
A card stack effect where overlapping cards fan out with satisfying elastic spring physics. Cards begin tightly stacked with subtle depth offsets, then spread into an even arrangement driven by scroll position or mouse hover. Built with GSAP's elastic easing and ScrollTrigger scrub for buttery-smooth, physics-inspired motion.
What's Included
- Scroll-scrubbed fan animation with smooth scrub interpolation
- Hover-triggered elastic spread across full container width
- Spring physics via GSAP elastic easing for organic feel
- Per-card staggered timing for cascading motion
- Click-to-front card selection with elastic lift and z-index management
- Subtle rotation and vertical lift during spread
- Touch device support with tap-to-toggle
- Keyboard accessible with focus-triggered fan
- Reduced motion fallback showing cards in grid layout
Perfect For
- Service or feature showcases on agency portfolios
- Process step cards that reveal on scroll
- Team or product card galleries with hover interaction
- Portfolio project stacks with satisfying spring reveals
- Landing page sections with engaging card interactions
How It Works
Cards are absolutely positioned within a flex-centered container, initially stacked with slight scale and position offsets for depth. Demo 1 calculates even spacing across the container width on hover, then animates each card with GSAP's elastic.out easing and staggered delays for a cascading spring effect. Clicking a card brings it to the front with a 20px elastic lift while preserving the fan layout. Demo 2 uses ScrollTrigger with scrub to interpolate each card's x-position, rotation, and vertical offset as the user scrolls.