Bugs with gsap scrolltrigger in Safari

[Christoph13524]

I experience bugs when used together with gsap scrolltrigger. Page works without problems without lazyload with scrolltriggers but when adding lazyload things start to be different. Lazyload somehow breaks the scrolltriggers and I have to refresh them in order to make it work again. Scrolltriggers start to be at wrong places when using lazyload.

Tested in Safari. Chrome and Firefox seem to have less issues.

Is this a known issue?

[grebjamin]

I've stumbled upon this issue in safari as well. And as you say, the scroll trigger seems to work fine on Chrome and Firefox.

[aashankhan2981]

Experiencing a similar issue here – my GSAP ScrollTriggers are exhibiting unexpected behavior in Safari, whereas they function correctly in Chrome. Below is a snippet of the code:

useEffect(() => {
  let trigger;
  const timeout = setTimeout(() => {
    trigger = ScrollTrigger.create({
      trigger: "#simulator-section",
      start: "top bottom",
      onUpdate: ({ progress }) => {
        lottieRef.current?.goToAndStop(progress * 2 * lottieRef.current.totalFrames, true);
      },
      // pin: true,
    });
  }, 1000);

  return () => {
    trigger && trigger.kill();
    clearTimeout(timeout);
  };
}, [lottieRef]);

[Christoph13524]

I gave it another shot with: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js //cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js //cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.plugins.min.js

Seems like the new version of gsap and scrolltrigger has changed something but made it even worse.

In general, lazyload still breaks the scroll trigger position --> it is not where it should be.

That kind of worked (with a workaround) before with older versions of gsap/scrolltrigger: The workaround was to update the scrolltrigger frequently (every 2 sec was enough while scrolling in my case): window.addEventListener("scroll", function () { ScrollTrigger.refresh(); }, 2000);

That is by far not an elegant solution!

Today I tried it with the latest versions of gsap/scrolltrigger. Not changing anything, the scrolling of the whole website was completely buggy and glitchy. Feels like every scroll movement the website jumps 100px up and 100px down.

I then removed: window.addEventListener("scroll", function () { ScrollTrigger.refresh(); }, 2000);

--> Scrolling was again how it is supposed to be, but still the same issue of wrong scrolltrigger trigger position came back.

Now I again gave up and switched back to the old gsap versions (3.9.1).

Any ideas?