[GSAP with Nuxt.js | ERROR Cannot read property 'querySelectorAll' of undefined]

If you're using svelte, wrap your code with onMount hook.

 

import {onMount} from 'svelte'

onMount(() => {
  gsap.to(".title", {
    duration: 5,
    ease: "none",      
    x: "+=500"
  });
})

[Does using too many scrollTrigger cause performance problems?]

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.