Back to Motion Prompt examples
Landing page & web effects, part 2 · #03
Stacking cards
Cards stack on top of each other on scroll. On scroll, the next card rises from below and stacks over the previous one with a small offset; the cards underneath shrink a little and darken.
Scroll effectsstacking-cardsstickyscrollcardsposition-stickysteps
Full motion specification
How the movement works
Use it for steps, features or plans that should be shown one card at a time, in order.
- 01A 511 × 168 viewport. Scroll step s: 0→1 over 0.3–1.1 s, 1→2 over 1.6–2.4 s, 2→0 over 3.2–4.4 s (cubic ease-in-out). One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Three cards (371 × 124, radius 12, centered), 170 px apart on the page; each step of s moves them up 170 px.
- 03They stop 14, 26 and 38 px from the top (position: sticky with the top offset 12 px larger for each card), so each new card covers the one before.
- 04For each card stacked on top, the card underneath shrinks 4.5% (9% for two) around the middle of its top edge and darkens under a navy layer (up to 16%).
- 05Card shadow: 14 px blur, 2 px upward. The scrollbar thumb follows the scroll.
Prompt
Show the three service steps as stacking cards: on scroll, each card slides up and stacks 12 px below the top of the one before.