Stacking cards on scroll

Build a stack of cards

The box below is a small window. Scroll it, drag the slider or press Play: each card sticks under the one before, a step lower, and the card underneath shrinks and dims while the next slides over it. Preview it with scrollProgress, the JavaScript tab’s call told to follow the box, or with the CSS only tab’s stylesheet and no script. The numbers beside it are read back from the cards as the browser has them.

/* Made with https://svg-scroll-draw.vercel.app/stacking-cards-scroll-generator */
/* The list's top padding is the first card's offset, so the first card
   sticks just as the list's top reaches the window's top. */
.stack {
  margin: 0;
  padding: 48px 0 0;
  list-style: none;
}
/* Room for the pile to rest, one card's scroll, before it leaves. */
.stack::after { content: ''; display: block; height: 288px; }

.stack-card {
  position: sticky;
  top: calc(48px + var(--i) * 16px); /* each card 16px lower than the last */
  box-sizing: border-box;
  height: 280px;
  margin-bottom: 24px;
  padding: 28px;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.18);
  transform-origin: 50% 0; /* shrinks towards its top edge, which stays in view */
}
.stack-card:nth-child(1) { background: #1f3a5f; }
.stack-card:nth-child(2) { background: #7a3b2e; }
.stack-card:nth-child(3) { background: #2f5d50; }
.stack-card:nth-child(4) { background: #5b4a7a; }
.stack-card-n { font: 600 13px/1 ui-monospace, monospace; opacity: 0.7; }
.stack-card h3 { margin: 16px 0 8px; font-size: 28px; line-height: 1.15; }
.stack-card p { max-width: 36ch; margin: 0; font-size: 16px; line-height: 1.5; opacity: 0.85; }

/* Where scroll-driven animations run, a covered card shrinks and dims.
   Everywhere else this block is skipped: the cards still stack. */
@supports (animation-timeline: view()) and (view-timeline-name: --x) {
  .stack { view-timeline: --stack block; }
  /* exit-crossing 0 is the list's top at the window's top: card 0 sticks
     there, and card i, i × 288px later (height 280 + gap 24 − step 16).
     Each card's range is the 288px in which the next one lands on it. */
  .stack-card {
    animation-name: stack-cover;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-timeline: --stack;
    animation-range: exit-crossing calc(var(--i) * 288px) exit-crossing calc(var(--i) * 288px + 288px);
  }
  .stack-card:last-child { animation: none; } /* nothing lands on the last one */
}

@keyframes stack-cover {
  to { scale: 0.92; filter: brightness(0.7); }
}

/* The cards still stack; they only stop shrinking and dimming. */
@media (prefers-reduced-motion: reduce) {
  .stack-card { animation: none; }
}

How the cards stack

Card i is position: sticky at top + i × step, inside one list. While the list scrolls past, each card scrolls up until it reaches its own top, stops there over the cards before it, and leaves its strip of them, step px, in view (fig. 1). The list has a top padding as tall as top, so the first card sticks just as the list’s top reaches the window’s top: from there, card i sticks after i × LAND px of scroll, where LAND = card height + gap − step, and the next card lands on it LAND px later. With the defaults that is 280 + 24 − 16 = 288px.

The pure CSS version

The stacking is position: sticky alone, in every current browser. If the cards only have to pile up, this is all it takes:

/* Cards that only stack: no timeline, no script. */
.stack-card {
  position: sticky;
  top: calc(48px + var(--i) * 16px);
  height: 280px;
  margin-bottom: 24px;
}

The shrink and dim need scroll-driven animations. The CSS only tab gives the list a view timeline. On it, exit-crossing 0 is the moment the list’s top reaches the window’s top, which is where the first card sticks, and a length after it is that much more scroll. So card i’s range is exit-crossing calc(var(--i) * LAND) exit-crossing calc(var(--i) * LAND + LAND): one rule for every card, whatever their number. Its keyframes only say where it ends, so before its range a card shows as written, and forwards keeps it covered after. It all sits inside @supports: where there are no scroll timelines the cards still stack.

The script: scrollProgress on the list

The JavaScript tab keeps the stacking in CSS and hands the shrink and dim to scrollProgress(target, options), which follows the scroll in every browser and writes a number for CSS to read. It is called once, on the list, not once per card: a sticky card’s position on screen stops changing while it is stuck, so the list, which never sticks, is the one to measure.

Use it in your project

scrollProgress has an entry of its own, svg-scroll-draw/progress, and the generated code imports it from there.

npm i svg-scroll-draw

Stacking cards questions

More on scroll with svg-scroll-draw 2.27.3: CSS scroll-driven animations, pinning without GSAP and scrollProgress in the docs.