Ejemplo · plugin: SplitText

División de texto

mode() y run() se leen en el callback, así que cambiar la granularidad (o darle a repetir) revierte la división anterior y empieza de nuevo. Al destruir, el párrafo queda restaurado tal cual estaba.

SplitTextinjectGsapsignal

Las buenas interfaces se mueven con intención. Divide este párrafo en caracteres, palabras o líneas, y coreografía las piezas con toda la caja de herramientas de GSAP. Sal de la página y cada pieza vuelve a coserse exactamente como estaba.

<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>

Cómo funciona

mode() y run() se leen en el callback. Cambia cualquiera y se vuelve a ejecutar. Ese es todo el mecanismo de repetición.
El SplitText creado dentro del contexto se revierte con él: sal de la página y el párrafo vuelve a su marcado original, sin spans sobrantes.
Cada nueva división trabaja sobre el párrafo restaurado, no sobre los spans de la ejecución anterior, porque cada re-ejecución revierte primero.