Split text

Every spawn class automatically gets a .spawn-text-<name> flavour. Applying it splits the element's text with GSAP's SplitText and animates each part with the same from state as its base animation.

html

<h2 class="appear spawn-text-spawn-up letter">Splits into letters</h2>
<h2 class="scroll spawn-text-spawn-fade">splits into words (default)</h2>

Granularity

(none)Per word - cheapest, best default

.letterPer character - most granular

.linesPer line - great for multi-line headings

Live demo

Letters spring up

Lines drop in
one after another

Tunables

stagger-NFixed per-part delay; duration is back-solved to fit time-N

time-NTotal reveal time for the whole element

no-revertKeep the split spans after completion (default: collapse back)

The split collapses back into plain text once finished unless .no-revert is present, freeing hundreds of per-letter nodes so long pages stay fast. Arabic/Persian text gets a special per-letter split that keeps glyph joins intact via zero-width joiners.