Example · plugin: ScrollTrigger

Scroll-scrubbed timelines

ScrollTrigger is registered once with provideGsap({ plugins: [ScrollTrigger] }) and used exactly as the GSAP docs describe. The context reverts the trigger when you leave this page.

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>

How this works

The scrollTrigger config goes straight to GSAP, unchanged.
The trigger is registered in the component's context, so navigating away reverts it. Without that it would keep measuring and firing on every scroll after the page is gone, which is probably the most common GSAP-in-a-SPA bug.
The scrubbing runs on GSAP's ticker. Angular does no work while you scroll.

keep scrolling: the tween is bound to the scrollbar

The square became a circle, turned Angular pink to GSAP green, and did a full rotation, all scrubbed by the scrollbar rather than a clock.