Scroll Sticky Stack — Free GSAP ScrollTrigger Stacking Cards

The scroll sticky stack is the popular effect where full-height cards pin one after another and each shrinks and darkens as the following card slides up to cover it, building a tidy deck instead of scrolling away — the storytelling layout from modern product pages. This snippet combines CSS position: sticky with GSAP ScrollTrigger (from a CDN).

Sticky does the stacking

Each card is position: sticky with the same top offset, so as you scroll, a card sticks at that position while the next card scrolls up underneath the previous one's bottom and eventually pins over it. CSS sticky alone produces the overlap for free — no JavaScript needed for the pinning. The cards share a top value so they land in the same place and pile up.

GSAP adds the depth

Sticky alone would just stack flat cards; the recession comes from GSAP. For each card, a tween scales it to 0.86 and dims it with filter: brightness(0.6), driven by a ScrollTrigger whose trigger is the next card. So a card only shrinks while the card after it is moving up to cover it — start: 'top bottom' (next card enters) to end: 'top top' (next card fully overlaps). The result is each card visibly sinking back as it's buried, giving the stack real depth.

Triggering off the next element

The key idea is that each card's animation is keyed to the next card's scroll position, not its own. That's what synchronizes the shrink with the cover: the card behind reaches full small-and-dim exactly when the card in front has completely overlapped it. transform-origin: 50% 0 scales each card from its top edge so it shrinks toward where it's pinned, keeping the top aligned as it recedes.

Scrubbed and reversible

scrub: true and ease: 'none' tie the scale and brightness directly to scroll, so scrolling back up brings each buried card forward again — it grows and brightens as the covering card retreats. Nothing plays on a fixed timeline, so the stack is fully reversible and always matches the scroll position.

Cheap and smooth

The animation only changes transform and filter, both GPU-friendly, and the last card is skipped since nothing ever covers it. Because sticky handles layout and GSAP only animates compositor properties, the effect stays smooth with any number of cards.

Customizing it

Add cards (each with its own accent), change how small or dim they get, adjust the sticky top and card heights, or add a slight y offset for a fanned look. Pair it with stacking scroll cards, a scroll pin steps panel, or scroll 3d cards.