19 July 2026

Masked Text Reveal Animations: The Pattern Explained

The short answer

A masked text reveal splits a heading into lines or words, wraps each in a parent with overflow: hidden, offsets the inner spans to yPercent: 100, then animates them to 0 with a stagger. The overflow mask makes text appear to rise from an invisible line. Use an ease-out curve, keep total duration around 0.8-1.2 seconds, and play it once on enter rather than scrubbing, so the copy stays readable.

The rising-text reveal is probably the single most recognizable premium web animation: headlines that slide up out of nothing, line by line. The mechanism is simpler than it looks, and it is the same on nearly every site that uses it.

The anatomy of the effect

Split the text into lines or words, either manually with spans or with a splitting utility.
Wrap each piece in a mask element with overflow: hidden.
Set the inner pieces to yPercent: 100 so they sit just below their mask.
Tween them to yPercent: 0 with a stagger of 0.08-0.15 seconds and an ease like power3.out.

The mask is what sells it. Without overflow: hidden you just have text sliding up; with it, each line materializes at a crisp edge.

The details that matter

Trigger the reveal with ScrollTrigger's play-on-enter behavior, not scrub; readers should never control the speed at which words assemble. Guard against a flash of visible text before JavaScript runs by hiding via a class that JS removes. Re-split on resize if you split by lines, because line breaks change. And under prefers-reduced-motion, swap the movement for a simple fade or show text instantly. The Ember Studio template uses masked line reveals across its headings, all inspectable in one HTML file. The text animation module of Scroll Animation Mastery walks through splitting, masking, stagger timing, and the resize handling that production versions need. Once the pattern is working, the same mask-and-stagger idea extends naturally to images and cards, which is why it is worth learning properly once.