Ejemplo · core

Animaciones dirigidas por signals

Los puntos vienen de una query viewChildren() leída dentro del callback. Mueve el slider y la query se actualiza, el contexto se revierte y la entrada se repite. Es el mismo modelo mental que cualquier vista dirigida por signals.

injectGsapviewChildrentargets

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

Cómo funciona

viewChildren('dot') es un signal. Mueves el slider, count() cambia, el @for pinta puntos nuevos, la query se actualiza y el callback vuelve a correr con los elementos ya en el DOM.
Cada re-ejecución parte de un revert(), así que no quedan estilos inline de la entrada anterior.
Explotar es un handler normal envuelto en contextSafe: su tween se une al mismo contexto y muere con el componente.
Los selectores también funcionan. gsap.from('.dot', …) está limitado a este componente; la misma clase en otra parte de la página no se toca.