Advanced · gsap.quickTo

Pointer tracking with quickTo

quickTo() builds one reusable tween per property, so a pointermove handler can feed it coordinates hundreds of times per second without creating garbage. The handler is wrapped in contextSafe, and the tween itself runs on GSAP's ticker, outside change detection.

gsap.quickToviewChildcontextSafe

move the pointer around this stage

<div
  #stage
  class="stage"
  (pointermove)="onMove($event)"
>
  <span #chaser class="chaser"></span>
</div>

How this works

gsap.to() inside a pointermove handler would allocate a new tween on every event. quickTo() builds the tween once; the handler just feeds it coordinates.
The chaser and the stage come from viewChild queries. target() unwraps them for GSAP.
The quickTo tweens live in the context like everything else, so they're cleaned up when you leave the page.