Text reveal techniques, ranked by cost
Block fade-and-rise. The whole text block fades in and translates 12–20px. No DOM manipulation, no accessibility impact, works with any font. This should be the default, and for body copy it should usually be the only option.
Line mask. Each line sits inside a container with overflow: hidden, and lines translate up in sequence. Visually strong on headlines. The cost is that lines must be wrapped, which means either server-side markup you control or a script that re-splits on resize — and a script that splits text must restore it if it fails, or a reflow can leave words orphaned mid-animation.
Word and character stagger. Each word or letter animates individually. Dramatic on short headlines, unreadable on paragraphs. The important detail is that splitting text into per-character elements can cause some assistive technology to announce text letter by letter. Keep the original string available — put it in an aria-label on the wrapper and mark the split fragments aria-hidden.
Clip-path wipe. An inset or polygon clip animates from zero to full. Cheap, GPU-friendly, and it does not require splitting anything. Diagonal wipes read as more designed than horizontal ones at no extra cost.
Elastic Reveal. A rise with slight overshoot. Excellent for a single hero line or a number counter; poor when several run at once, because the overshoots fall out of phase and the section looks like it is wobbling.
Image transition patterns
Crossfade. Two stacked images, opacity swapped. Universally safe. Reserve 240–400ms; faster feels like a flicker.
Liquid Reveal. An SVG or CSS mask with a soft irregular edge sweeps across the image. Strong for editorial and gallery work. Animating a mask position is cheap; animating mask geometry per frame is not.
Scale-and-clip. The container clip expands while the image itself scales down slightly from 1.08 to 1.0. This is the pattern that makes a photograph feel like it settles into place. It requires the container to already have its final dimensions, or you will shift the layout.
Ken Burns drift. A very slow scale and pan on a static image. Effective as a background, distracting behind text unless the movement is under roughly 3% of the image size over ten seconds.
Comparison
| Technique | Needs DOM splitting | Duration | Watch out for |
|---|---|---|---|
| Block fade-and-rise | No | 280–360ms | Nothing significant |
| Line mask | Yes — per line | 400–600ms total | Clipped descenders, resize re-splits |
| Character stagger | Yes — per character | 500–800ms total | Screen-reader announcement |
| Clip-path wipe | No | 320–480ms | Clip on a parent can hide focus rings |
| Scale-and-clip image | No | 400–600ms | Layout shift without reserved space |
Layout shift is the real risk
Every image reveal must start from a box that already occupies its final space. Set width and height attributes on the image, or give the wrapper an aspect-ratio, so the reveal animates pixels inside a stable box rather than pushing content around. This matters twice over: cumulative layout shift is a measurable quality signal, and a reveal that nudges a paragraph mid-read is worse than no reveal at all.
Object-fit with a fixed aspect ratio handles most cases. For art-directed crops, <picture> with source-specific dimensions keeps the reserved box correct at each breakpoint.
Pros and cons of heavy reveal treatment
In favour
- Directs reading order on dense pages without extra visual hierarchy.
- Masked reveals imply quality and are cheap when done with transform and clip.
- A staged reveal can hide the moment an image decodes.
Against
- Text hidden until reveal is text that may never appear if a script fails.
- Character splitting harms copy-paste, translation tools and screen readers.
- Repeat visitors experience the same reveal as latency, not delight.
Accessibility checklist
Keep the source text intact and in reading order. Never rely on an animation completing for content to be perceivable — the final state must be the default state in CSS, with the pre-reveal state applied only when scripting is available. Ensure masks do not clip focus indicators: a parent with hidden overflow will swallow an outline on a focused link inside it, so add padding or use outline-offset carefully. Under reduced-motion, collapse the reveal to a short fade or drop it altogether. The relevant success criteria are documented by the W3C WCAG overview.
Practical defaults
If you need numbers to start from: body blocks fade and rise 16px over 320ms with a 70ms stagger; headline line masks travel 100% of line height over 520ms with a 90ms stagger and a strong ease-out; images use scale 1.06 to 1.0 with a clip-path inset over 520ms. Then open the playground, change one value at a time, and trust the preview over the spec.