Scroll storytelling without the dizziness

Sticky scenes, scroll-triggered reveals, and the line between cinematic and motion sickness.

Scroll-driven storytelling is what Apple, Stripe, and Linear all use for product pages: a sequence of scenes that unfolds as the user scrolls. Done well, it turns a flat page into a tour. Done poorly, it nauseates the reader.

There are exactly two scroll patterns worth using, plus a list of mistakes.

The sticky scene

A section pins to the viewport while the user scrolls through several states of it. Stripe's payment page uses this to show different payment methods sliding through. Apple uses it to morph product shots through hero shots, exploded views, and feature callouts.

The user feels like they're scrolling through a single rich scene rather than moving past a wall of cards.

The stagger reveal

Elements fade and slide in as they enter the viewport, with a stagger between them. A grid of features that animates 80ms apart feels alive without being precious.

Animate once per page-load, not every time the section re-enters the viewport. Re-animating on every scroll-up is the single most annoying pattern in product UI.

The mistakes

  • Hijacking the scroll. Don't make the wheel feel different than the user expects. They scrolled 200px; the page should respond to 200px of scroll. Anything else is a fight.
  • Parallax depth past 2 layers. Three or more layers moving at different speeds produces motion sickness in maybe 1 in 8 viewers. Not worth it.
  • Horizontal scroll on a vertical page. If the user has to fight the wheel direction, they bounce.
  • Long sticky sections. Past 2–3 viewport-heights of stickiness, users get bored and confused, am I scrolling? Is the page broken? Keep sticky sequences to 2–3 states max.

Performance

Scroll-driven animation lives on the main thread. If it stutters, the whole page feels broken. Use transform and opacity only, no width, no top/left, no filters. Test on a 3-year-old laptop, not your M3.

Build one

The scroll-stagger and scroll-story entries have tuned prompts. Start with stagger reveal, it's lower risk and works on every page. Reach for sticky scenes only when you have content rich enough to deserve them.

Keep reading