Built for Motion
Log in

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 components

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