Why does my line reveal break on resize?

SplitText caches line breaks at split time. When the container resizes, the visual line breaks change but the wrappers don't, so the clip masks land in the wrong place. Listen for resize (debounced), call `split.revert()`, then re-create the split. Char and word splits don't have this problem - only line splits depend on layout width.

Should I use overflow-clip or clip-path for the mask?

Overflow-clip + translate is the most reliable and broadly supported - the line slides up behind a clipping container. clip-path gives you more shapes (diagonal wipes, center-out) but is slightly more involved. For a standard slide-up-from-behind-an-edge reveal, overflow-clip is the cleaner default.

Is SplitText free to use?

Yes. SplitText was rewritten and made free for commercial use in GSAP 3.13 (mid-2024). Install via `npm i gsap`, import from `gsap/SplitText`, and register it. Always return a cleanup that calls `split.revert()` so wrappers don't leak, especially in React under StrictMode.

Motion pattern

Text Mask Reveal

A text mask reveal uncovers a headline by wiping a mask across it, line by line or all at once, rather than fading it in. The text appears to slide out from behind a clean edge, which reads as crafted and editorial. Built with SplitText to break the headline into lines, then an overflow-clip mask with a transform underneath.

Updated June 2, 2026

Components

Components that solve this

Cinematic TextBig headlines slide in from the sides as you scroll, by line, word or letter.Text RevealText comes in word by word or letter by letter as you scroll.Rectangle Text RevealLines of text appear one by one as a rounded rectangle wipes off each line and the words slide out from behind it.Folding TextLetters fold and unfold in 3D as you scroll, for a dramatic editorial reveal.Mask RevealContent opens up or closes down through a shape as you scroll, a circle, oval, rectangle, blob or your own shape.

Tradeoffs

Tuning the pattern

Split granularity: Line splits (Mask Reveal, Rectangle Text Reveal) read editorial and calm and are what most headlines want; word and char splits (Text Reveal `type` words or chars, Cinematic Text) read energetic but multiply the element count and, for char splits, can get illegible mid-reveal, so reserve them for short, punchy statements rather than multi-line headings.
Mask vs clip: Overflow-clip plus a translate (the line slides up from behind a hidden edge, Text Reveal `y-percent` 100) is the most reliable and broadly supported default; an animated clip-path or a rectangle wipe (Rectangle Text Reveal) buys you diagonal and center-out shapes at slightly more setup, and Folding Text trades both for a 3D fold (`rotation` 90, `perspective` 1000) when you want the line to hinge rather than slide.
Stagger rhythm: Rectangle Text Reveal and Text Reveal both default the stagger to 0.05s per line (range roughly 0.03 to 0.2); a tight 0.03 to 0.06 reads as one fluid cascade for a headline, while spacing it past 0.1 makes each line a separate beat, which only suits a short statement where you want the reader to pause on each line.

When

When a text mask reveal fits

The mask reveal is the default 'premium headline' entrance. It works anywhere a headline should arrive with intent rather than just appear.

Hero headlines on landing and campaign pages
Section titles that punctuate a long-scroll page
Editorial pull-quotes and statements
Any headline where a plain fade-in feels flat against the rest of the page rhythm

Reveal headlines, not paragraphs

Line-by-line masking on a full paragraph delays reading and tests patience. Reserve the reveal for headlines and short statements. Body copy should appear quickly so it can be read.

Mechanics

How the reveal works

SplitText breaks the headline into lines, each wrapped in an overflow: hidden container. An inner span sits below its container (translated down 100%) and slides up to 0 on reveal. Because the container clips, the line appears to emerge from behind a hard edge. Stagger the lines for the cascade.

script.js

In production

Annnimate components that solve this pattern

The Mask Reveal component does the line-clip slide-up reveal for any headline or block
The Rectangle Text Reveal wipes a solid rectangle across the text rather than sliding it from a clip edge
The Cinematic Text scrubs a clip wipe line-by-line tied to scroll position
The Text Reveal is the general per-line/per-char entrance, and Folding Text adds a 3D fold to the reveal

FAQ

Common questions

Why does my line reveal break on resize?: SplitText caches line breaks at split time. When the container resizes, the visual line breaks change but the wrappers don't, so the clip masks land in the wrong place. Listen for resize (debounced), call split.revert(), then re-create the split. Char and word splits don't have this problem - only line splits depend on layout width.
Should I use overflow-clip or clip-path for the mask?: Overflow-clip + translate is the most reliable and broadly supported - the line slides up behind a clipping container. clip-path gives you more shapes (diagonal wipes, center-out) but is slightly more involved. For a standard slide-up-from-behind-an-edge reveal, overflow-clip is the cleaner default.
Is SplitText free to use?: Yes. SplitText was rewritten and made free for commercial use in GSAP 3.13 (mid-2024). Install via npm i gsap, import from gsap/SplitText, and register it. Always return a cleanup that calls split.revert() so wrappers don't leak, especially in React under StrictMode.

PreviousSticky CursorA sticky cursor replaces or augments the native pointer with a custom element that follows the mouse with smoothing, and reacts to what it hovers, growing over links, snapping to buttons, showing a label.

Related patterns

Adjacent ideas in the patterns

Scroll Image RevealA scroll image reveal uncovers an image as it enters the viewport, using a clip-path wipe, a mask, or a dissolve rather than a plain fade.Scramble TextA scramble text effect cycles each character through random glyphs before settling on the final letter, like a terminal decrypting a message.