How to use GSAP with angular and not effects the performance

Question

I need to use GSAP (Green Socks Animation) with angular application and not to affect the application performance or change the life cycle. Still, in the other hand, I need it to start on the component init or on scroll-triggered. So, how can I do that? Should I use something like angular zone or there's something more efficient?

I expect to use it like in a simple HTML CSS Jquery page and access all the components.

Answer 1

This can be tricky, but I found a solution, so I could see that Srolltrigger uses requestanimationframe behind the scenes, so you need to register it in the constructor like this:

constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      gsap.registerPlugin(ScrollTrigger);
    });
  }
  

in case your animations generate a continuous call to requestanimationframe, use this:

constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
  this.ngZone.runOutsideAngular(() => {
      your gsap animation here....
    });
    }

All this applies to libraries like swiper, lenis....The most important thing is to debug with angular devtools profiler