Example · core

Timelines

Build the timeline in the callback, keep the reference on the component, and drive it from event handlers wrapped with contextSafe. When you navigate away, the context reverts the whole thing.

injectGsapgsap.timelinecontextSafe

speed

@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)" />

How this works

The timeline is straight from the GSAP docs: position parameters, staggers, repeat: -1. Nothing here is wrapped.
Play, pause, and the speed slider go through contextSafe, so driving a 60fps loop never touches change detection.
Navigate away and the context reverts the loop. No timeline keeps ticking against a DOM node that no longer exists.