Ejemplo · core

Timelines

Construye el timeline en el callback, guarda la referencia en el componente y contrólalo desde handlers envueltos en contextSafe. Al navegar a otra página, el contexto revierte todo.

injectGsapgsap.timelinecontextSafe

velocidad

@for (bar of bars; track bar.i) {
  <span class="bar"></span>
}

<button (click)="play()">Play</button>
<button (click)="pause()">Pause</button>
<button (click)="restart()">Restart</button>
<input type="range" min="0.25" max="2.5"
  (input)="speed(+$event.target.value)" />

Cómo funciona

El timeline sale directo de la documentación de GSAP: parámetros de posición, staggers, repeat: -1. Nada está envuelto.
Play, pausa y el slider de velocidad pasan por contextSafe, así que manejar un loop a 60fps nunca toca change detection.
Navega a otra página y el contexto revierte el loop. Ningún timeline sigue corriendo contra un nodo del DOM que ya no existe.