Ejemplo · plugin: ScrollTrigger

Timelines scrubbed por scroll

ScrollTrigger se registra una vez con provideGsap({ plugins: [ScrollTrigger] }) y se usa exactamente como lo describe la documentación de GSAP. El contexto revierte el trigger al salir de esta página.

provideGsapScrollTriggerinjectGsap

<div #track class="track">        <!-- tall runway -->
  <div class="pin">        <!-- position: sticky -->
    <span #shape class="shape"></span>
    <div class="meter">
      <span #meterFill class="meter-fill"></span>
    </div>
  </div>
</div>

Cómo funciona

La configuración de scrollTrigger va directo a GSAP, sin cambios.
El trigger queda registrado en el contexto del componente, así que navegar a otra página lo revierte. Sin eso seguiría midiendo y disparándose en cada scroll con la página ya destruida: probablemente el bug más común de GSAP en una SPA.
El scrubbing corre en el ticker de GSAP. Angular no hace ningún trabajo mientras haces scroll.

sigue haciendo scroll: el tween está atado a la barra

El cuadrado se volvió círculo, pasó del rosa Angular al verde GSAP y dio una vuelta completa, todo scrubbed por la barra de scroll y no por un reloj.