GSAP Sticky Stacking Cards Scroll
proOn Scroll
Loading preview
Overview
Full-height project cards that pin and stack as you scroll. Each card sinks back, tilts and dims while the next one slides over it, like a deck being dealt.
Cards use position: sticky, and a single scrubbed timeline drives the whole stack, so it stays accurate after a resize mid-page, where per-card triggers would drift.
Details
- Category
- Scroll
- Interaction
- On Scroll
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 8 componentsBuilt with the same techniques
(02)FAQ
GSAP Sticky Stacking Cards Scroll — FAQ
01How many cards can it take?
As many as you like. Each card adds one screen of scroll.
02Does it work with Lenis?
Yes. Connect Lenis to ScrollTrigger with lenis.on("scroll", ScrollTrigger.update) and it scrubs smoothly.