Text

SplitText

SplitText is a GSAP plugin that breaks a block of text into per-character, per-word, or per-line wrappers so each unit can be animated independently. It's the building block for stagger reveals, scramble effects, line-by-line wipes, and any motion that needs to address text at sub-element granularity. As of GSAP 3.13 (mid-2024) it ships free for commercial use.

Updated June 1, 2026

Mechanics

How SplitText works

Pass an element (or selector) to SplitText.create() along with the split mode you want. The plugin wraps every character, word, or line in a span and returns an instance whose .chars, .words, .lines arrays are the new targets. Animate those arrays with stagger and you get the per-unit reveal.

script.js

type accepts 'chars', 'words', 'lines', or any comma-separated combination. Asking for 'chars,words' lets you animate chars but still respect word boundaries for wrapping. 'lines' requires a block-level container with known width - it splits visually-rendered lines, so a resize requires a re-split.

Cleanup

Always revert

SplitText replaces the original text node with a tree of span wrappers. If you skip cleanup, the wrappers stay in the DOM forever, and a second SplitText.create() on the same element layers wrappers inside wrappers - the canonical 'why is my text invisible' bug.

Component.jsx
When

Use SplitText for

  • Headline reveals where characters or words stagger in
  • Scramble effects that need a fixed character grid
  • Line-by-line wipes (paragraphs revealing one line at a time)
  • Word-level emphasis (rotating one word in place while others hold)
  • Anything where the text itself is the animated subject
Alternatives

Use something else when

  • Whole-block opacity / translate reveals - just animate the element, no split needed
  • Counters and number tickers - use gsap.to({ value }) with a numeric tween, not character splitting
  • Single-character emoji or icon swaps - manipulate the text directly, splitting adds cost for nothing
  • Server-rendered text where Lighthouse needs to read the unwrapped content - run the split in useGSAP (client-only) so SSR HTML stays clean
In production

Used in these Annnimate components

  • The Text Reveal component splits a headline into chars and staggers a y/opacity in on scroll-enter
  • The Cinematic Text component splits into lines and scrubs a clip-path wipe across each line
  • The Character Appear component splits into chars and animates each with a rotation + scale in
  • The Popping Text component splits into chars and pops each one with a back.out ease on scrub
Used in components

See it running in production

Text RevealText comes in word by word or letter by letter as you scroll.Cinematic TextBig headlines slide in from the sides as you scroll, by line, word or letter.Character AppearLetters fade in one at a time as you scroll, like a typewriter but with no movement, in order or scattered at random.Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.Step WipeA tall scroll-driven section that wipes between product steps as you scroll, with the background and the centred card clipping open together, and the title, step number and description swapping in sync at each step.
FAQ

Common questions

Is SplitText still a paid plugin?
No - as of GSAP 3.13 (mid-2024) SplitText is part of the public GSAP package and free for commercial use. You can install it via npm i gsap and import from gsap/SplitText. The old Club GreenSock paywall was lifted when GSAP became free-for-all.
Why is my SplitText animation broken on resize?
Line splits are cached against the rendered width at split time. If the container resizes, the line breaks change but the wrappers don't. Listen for resize, debounce, then split.revert() and re-create. For chars/words splits, this is usually unnecessary - those don't depend on layout.
Should I split into chars, words, or lines?
Chars for granular character-level reveals (scramble, magnetic). Words for natural-feeling reveals where you want each word to enter as a unit. Lines for paragraph copy where wiping line-by-line reads as 'reading' the text. You can combine: type: 'chars,words' lets you animate chars without breaking word wrapping.
Can I use SplitText with screen readers?
Yes, but verify. SplitText wraps text in spans, which screen readers usually read correctly. For long copy where each character becomes its own focusable element (rare), add aria-label with the original string to the parent, and aria-hidden="true" on the wrappers. Annnimate's text components apply this pattern.
Does SplitText work in React?
Yes, but always create it inside useGSAP and return a cleanup that calls split.revert(). Without revert, React's reconciliation will leave orphaned wrappers in the DOM, and StrictMode's double-mount will stack them. The cleanup is what makes the pattern safe.
PreviousSplit-text revealSplit-text reveal is a text-animation pattern that breaks a headline or paragraph into characters, words, or lines with GSAP SplitText, then staggers each unit into view so the text assembles itself instead of just appearing.NextTextPluginTextPlugin is a GSAP plugin that animates the text content of an element from its current string to a new one, swapping characters in across the tween's duration.
Related conceptsstaggerScrollTriggeruseGSAPgsap.timeline()