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.
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 travelScroll-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.