Intro · Scroll· 23 sites
Reference: SplitText, GSAP
How it works
Headlines that rise line by line out of invisible masks, the SplitText look without the library.In 6 steps.
Studio and agency sites in the library reveal their headings the same way: the text is split into lines, each line sits in a box that clips it, and each rises into view a little after the one above. GSAP's SplitText is what most of them load. The effect needs three things: a split that follows the browser's own line breaks, masks with room for descenders, and a stagger short enough that the sentence still reads as one.
- 01
Split into words first
Wrap every word in an inline-block span. That keeps the browser's own wrapping, hyphenation aside, and gives each word a position.
- 02
Group words into lines by their top
Words whose offsetTop matches are on one line. Rebuild the heading as one block per line.
- 03
Mask each line
An outer span with overflow: clip and an inner span that moves. Pad the mask (about 0.12 em above, 0.18 em below) and pull the space back with negative margins, so descenders and italic overhangs are not cut off.
- 04
Rise, one after another
Animate the inner span from translateY(110%) to 0 with a strong ease-out (expo or power4), 0.6–1 s, 50–100 ms apart.
- 05
Re-split on resize
Line breaks change with the width; words and letters do not. Split again only when the width really changed.
- 06
Keep it readable
Put the full text in aria-label on the heading and hide the split spans from assistive tech, or screen readers spell out fragments.