Back to Dictionary
Scroll & Navigation
●●○Customize
Use sparingly

Scroll Stack Cards

Use Scroll Stack Cards for short ordered narratives; use Stagger List Reveal for ordinary lists.

Use

Helping users understand ordered content as a sequence while scrolling.

Avoid

Avoid it for large collections or pages where scrolling should remain purely functional.

Safer Alternative

Stagger List Reveal

Risk Level

High attention

Timing

Tie movement to scroll position; avoid long independent animations.

Easing

Use scroll-linked linear mapping or very light smoothing.

Risk

performance sensitiveaccessibility sensitivefeels slow

Live Demo

Discover01
Compare02
Choose03

What It Is

A stack of overlapping cards separates or advances as the user scrolls, turning ordered content into a spatial sequence.

Decision Guidance

Use Scroll Stack Cards for short ordered narratives; use Stagger List Reveal for ordinary lists.

Best For

Helping users understand ordered content as a sequence while scrolling.

Avoid When

Avoid it for large collections or pages where scrolling should remain purely functional.

Timing

Tie movement to scroll position; avoid long independent animations.

Easing

Use scroll-linked linear mapping or very light smoothing.

Risk Tags

performance sensitiveaccessibility sensitivefeels slow

Alternatives

Stagger List RevealTimeline RevealScroll Progress Bar

✓When to Use

  • Step-by-step explainers
  • Case study sections
  • Feature walkthroughs with a clear order

✕When NOT to Use

  • Unordered card grids
  • Dense reading pages
  • Lists where users need to scan many items quickly

Configuration Tips

  • 01Use it for short sequences only
  • 02Keep scroll progress predictable and reversible
  • 03Provide a reduced-motion layout that shows all cards normally

You've Seen It In

Apple product pagesInteractive case studiesProduct walkthroughs

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a section of three stacked cards that separate as the user scrolls, explaining Discover, Compare, and Choose in sequence.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function ScrollStackCards({ progress = 0.6 }: { progress?: number }) {
  const cards = ['Discover', 'Compare', 'Choose'];

  return (
    <section className="relative h-72 rounded-2xl border border-stone-200 bg-stone-50 p-6">
      {cards.map((card, index) => (
        <article key={card} className="absolute left-6 right-6 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm transition-transform duration-300" style={{ transform: `translateY(${index * 28 + progress * index * 20}px) scale(${1 - index * 0.04})`, zIndex: cards.length - index }}>
          <p className="font-mono text-xs text-stone-400">0{index + 1}</p>
          <h3 className="mt-2 text-lg font-semibold text-stone-900">{card}</h3>
        </article>
      ))}
    </section>
  );
}

Related Effects

Stagger List Reveal

When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.

Timeline Reveal

A vertical or horizontal timeline that reveals milestones in order, connecting each event with a drawing line or staggered item entrance.

Scroll Progress Bar

A thin bar that fills as the user scrolls through a page, showing current reading or completion depth.