GSAP SplitText Reveal — Free Text Animation Snippet

Splitting text into animatable pieces sounds trivial until you hit the real problems: wrapped lines, masking, screen-reader damage, and un-splitting cleanly. GSAP's SplitText plugin (free on the CDN since 3.13, and substantially rewritten in that release) solves all four. This snippet splits a headline and paragraph three switchable ways — characters, words, or lines — each with its own masked rise choreography and a clean revert between modes.

Lines are the hard part — and the plugin's real value

Chars and words can be split with a loop (see the hand-rolled scroll letter stagger); *lines* can't, because line breaks only exist after layout. SplitText measures where the browser actually wrapped the text and wraps each rendered line in its own div — which is why line-by-line reveals, the most editorial of all text entrances, effectively require this plugin. The 3.13 rewrite also re-splits automatically on resize when lines change.

mask: wraps pieces in clip containers for you

The masked rise — text sliding up from behind an invisible sill — normally needs hand-built overflow: hidden wrappers around every piece. Passing mask: 'lines' (or 'words'/'chars') makes SplitText generate those clip wrappers during the split, so yPercent: 110 entrances emerge from nothing with zero custom CSS. This snippet switches the mask to match the active mode, which is why all three feel native rather than one mask fitting all.

revert() is what makes re-splitting safe

Each mode change calls split.revert() before creating a new SplitText. Revert restores the exact original markup — no leftover spans, no nested wrappers from double-splitting, and any text styling returns to its untouched state. Skipping revert is the classic SplitText bug: split a split and your DOM fills with matryoshka spans whose transforms compound unpredictably.

One split exposes all three granularities

type: 'lines,words,chars' builds the full hierarchy in one pass — lines containing words containing chars — and the instance exposes them as arrays (split.chars, split.words, split.lines). The demo animates whichever array matches the button, with per-mode variables: chars get a rotation and tight 15ms stagger, words rise with fades at 40ms, lines sweep up masked at 120ms. Same mechanism, three distinct editorial voices.

Accessibility is handled, not broken

Naive splitting shatters words into meaningless single-letter spans for assistive tech. SplitText 3.13 applies aria-label to the container and hides the fragments from the accessibility tree by default, so screen readers announce the original sentence while sighted users see the choreography.

Why yPercent for the rise

yPercent: 110 displaces each piece by its *own* height, so the same code works at every font size in the clamp() range — a pixel offset would under-hide large headlines and over-travel small paragraph text. Combined with masks, pieces are genuinely invisible until they cross their sill.

Customizing it

Change the per-mode staggers, add from: 'random' scatter, or attach the entrance to a ScrollTrigger for viewport-triggered reveals. Related type effects: scroll-scrubbed characters in scroll letter stagger, typing in scroll typewriter, word emphasis in text reveal on scroll, and the vanilla split text cousin.