How to make sticky stacking cards on scroll with GSAP

The technique in three decisions

CSS sticky or ScrollTrigger pin. position: sticky is the lightest way to hold the cards: no JavaScript, no extra spacing, and the browser handles it on the compositor. It only works if no ancestor has overflow: hidden and the cards share one scrolling parent. ScrollTrigger's pin does the same job in JavaScript and works in more layouts, at the cost of wrapper elements and recalculations on resize.

What happens to the covered card. Something has to signal that a card is being buried, or the stack looks like cards overlapping by accident. Scaling it down slightly, from 1 to about 0.9, and dimming it is the common choice. A small rotation, a 3D tilt backward or a blur are the stronger variants.

Over what distance. The effect on a card should start when the next card begins to cover it and end when it is fully covered. Tie each card's animation to the card that comes after it, not to itself, and the timing stays right whatever the height of the cards.

A minimal version

Cards stack with CSS sticky; GSAP scales and dims each card while the following one slides over it.

.card {
  position: sticky;
  top: 10vh;
  height: 80vh;
  transform-origin: center top;
}

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const cards = gsap.utils.toArray(".card");
cards.forEach((card, i) => {
  const next = cards[i + 1];
  if (!next) return;
  gsap.to(card, {
    scale: 0.9,
    filter: "brightness(0.6)",
    ease: "none",
    scrollTrigger: {
      trigger: next,
      start: "top bottom",
      end: "top 10%",
      scrub: true,
    },
  });
});

The trigger of each tween is the next card: it starts when that card enters the bottom of the screen and ends when it reaches the same sticky position, at which point the covered card is fully hidden. ease: "none" keeps the scaling proportional to the scroll.

Where it gets hard

Sticky that does not stick. The most common bug is an ancestor with overflow: hidden, overflow: auto or overflow-x: hidden, often added to stop a horizontal scrollbar. Any of them turns that element into the scroll container and breaks sticky. Use overflow-x: clip on the page instead, which clips without creating a scroll container.

The last card. The last card has nothing covering it, so the section ends with it alone on screen and then the stack scrolls away. Add some space after it, or pin the whole stack for a moment, so the reader sees the full deck before moving on.

Mixing pin and sticky. Do not pin elements that are also sticky, and if you use ScrollTrigger pins, decide on pinSpacing. With pinned cards stacked over each other you usually want pinSpacing: false, otherwise each pin adds a viewport of empty space after it.

Mobile browsers. Units like vh change as the address bar shows and hides, which shifts the sticky position and can make cards jump. Use svh or dvh for the card height and the top offset, and test on a real phone.

Accessibility. The content of covered cards still exists in the page, so it is still read by screen readers in order, which is good. Make sure the cards are in a sensible reading order and that dimming does not leave text below contrast while it is still readable on screen.

Performance

transform and opacity are cheap. The brightness() filter in the example costs a little more because the card has to be repainted with the filter, and on long stacks of image cards a dark overlay with animated opacity is cheaper. Avoid animating box-shadow or border-radius on many cards at once.