Example · plugin: SplitText

Text splitting

mode() and run() are both read in the callback, so switching the split granularity (or hitting replay) reverts the previous split and starts over. On destroy the paragraph is restored exactly as it was.

SplitTextinjectGsapsignal

Great interfaces move with intent. Split this paragraph into characters, words, or lines, then choreograph the pieces with the full GSAP toolbox. Leave the page, and every piece is stitched back together exactly as it was.

<p #passage class="passage">Great interfaces move…</p>

@for (m of modes; track m) {
  <button (click)="mode.set(m)">{{ m }}</button>
}
<button (click)="replay()">Replay</button>

How this works

mode() and run() are both read in the callback. Change either one and it re-runs. That's the entire replay mechanism.
SplitText created inside the context is reverted with it: leave the page and the paragraph is back to its original markup, no leftover spans.
Each re-split works on the restored paragraph, not on the previous run's spans, because the re-run reverts first.