Example · core

Signal-driven animations

The dots come from a viewChildren() query, read inside the callback. Move the slider and the query updates, the context reverts, and the entrance replays. It's the same mental model as any other signal-driven view.

injectGsapviewChildrentargets

dots · 8

<div class="stage">
  @for (dot of dots(); track dot.i) {
    <span #dot class="dot"></span>
  }
</div>

<input type="range" min="3" max="24"
  [value]="count()"
  (input)="count.set(+$event.target.value)" />
<button (click)="burst()">Burst</button>

How this works

viewChildren('dot') is a signal. Move the slider, count() changes, the @for renders new dots, the query updates, and the callback runs again with the new elements already in the DOM.
Every re-run starts from a revert(), so there are no leftover inline styles from the previous entrance.
Burst is a normal event handler wrapped in contextSafe: its tween joins the same context and dies with the component.
Selector strings work too. gsap.from('.dot', …) is scoped to this component, so the same class elsewhere on the page isn't touched.