Split text (per-character animation)

Split text breaks one text node into addressable characters, words, or visual lines so each piece can move on its own. Stagger those pieces and a heading can rise letter by letter, a sentence can reveal word by word, or lines can slide out from behind a mask. GSAP SplitText is the familiar packaged tool for the job, and SplitType does the splitting alone if you want to animate the pieces with something else.

Choose the unit to match the rhythm: characters feel expressive, words stay readable, and lines suit editorial entrances. For a manual character split, Intl.Segmenter handles grapheme clusters that 'string.split("")' would tear apart. Wait for web fonts before measuring lines, because a font swap changes every wrap point.

Gotcha: dozens of wrapper spans are presentation, not document meaning. Keep the original phrase as the accessible name and hide the fragments from assistive technology so it is announced once, not character by character. Re-split line-based text after a responsive reflow, and do not split paragraphs whose main job is comfortable reading.