Does using too many scrollTrigger cause performance problems?

[dgknca]

I'm working on this site. I'm having performance problems with GSAP. You can see more obviously on Firefox as well. We're using a total of 77 scrollTriggers on this page. But I don't want to remove them because I like these animations very much. Is there any way to optimize it? An example of how we use it:

 

// GSAP DEFAULTS
ScrollTrigger.defaults({
  scrub: 2,
  start: 'bottom bottom',
  end: 'bottom bottom-=15%',
});

gsap.defaults({ duration: 3 });

gsap.from('.features__title', {
  autoAlpha: 0,
  y: 30,
  rotation: 0.01,
  scrollTrigger: {
    trigger: '.features__title',
    start: 'center bottom',
    end: 'bottom bottom-=50'
  }
});

We've optimized the other animations (blobs and lotties) with requestAnimationFrame and observer. 

[ZachSaucier]

Hey dgknca and welcome to the GreenSock forums. 

 

We don't have the capacity to do a complete performance audit of your website for free. But the issue here is very likely 

1. You have too many animations going on.
2. You're not animating very performantly (animating non-performant properties and similar issues).

I would recommend first cutting down your site piece by piece to see which pieces are giving you the most issues. Focus on those first since they are the most intensive/least performant. Continue to go through the rest of the pieces on your site to see if there are ways to improve the performance. Perhaps hiring someone with more experience would be helpful.