Skip to content
Motion theory

Scroll speed is a type choice

Reveal timing is typography in time: the same paragraph reads differently revealed fast or slow, and the right speed changes with the length of the line, the density of the page and the patience of the reader.

Intermediate2 min read (computed · recorded 9)updated 2026-09-10scrollrevealreadingmotion

Reading has a rhythm, and motion can break it

When someone scrolls a page, they are reading at their own pace — scanning, pausing, backtracking. A reveal animation that is slower than the reader's pace turns every paragraph into a wait. A reveal that is faster than the eye can register is invisible noise. The reveal speed is effectively a typographic decision: it sets the pace at which the reader is allowed to receive the text.

The mismatch is why long-form pages with aggressive reveals feel exhausting: the reader wants to skim, and the page keeps demanding they wait for the next block. Reads like a conversation with someone who pauses after every word.

Tuning reveals to content density

  • Dense paragraphs (long-form, docs): reveal whole blocks at 300–450ms or do not reveal at all — the reader needs the text now, and the motion is a tax.
  • Sparse statements (landing pages, one line per section): slower reveals at 500–700ms build anticipation — each line is an event, so it can take a beat.
  • Headlines: fast settle (200–300ms) with a slight upward travel — a headline that takes too long to become readable makes the reader wait for the sentence to start.
  • Lists and grids: stagger at 60–90ms per item — the stagger should read as one wave, not a queue. Over 120ms per item and the eye is waiting at the end of the row.
  • Images: reveal with a 150–250ms scale from 1.02 rather than a slide — images reward a settle, not a journey.
reveal-by-content.md
Paragraph, long-form    300-450ms   opacity + 8px rise
Landing statement       500-700ms   opacity + 16px rise
Headline                200-300ms   opacity + 4px rise
Grid item stagger        60-90ms    per item, one wave
Image                   150-250ms   scale 1.02 -> 1, no travel

Scroll-linked vs. scroll-triggered

Scroll-triggered (element enters viewport, plays once) is the right default for text: it respects the reader's pace because it only plays when the reader arrives. Scroll-linked (progress bar, parallax — motion bound to scroll position) is right for atmosphere: a hero gradient that shifts as you leave, a progress bar that tracks reading. The failure is using scroll-linked motion for content the reader is trying to read — text that moves with the scroll fights the eye's own tracking.

One rule ties it together: if the reader is reading, trigger it once and let it rest. If the reader is moving through atmosphere, link it to the scroll. Reading rhythm and atmosphere are different users of the same scroll.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.