ScrollSmoother on Mobile issue, normalizeScroll (scrollTrigger)

[terrorbyrd]

A website I am working on here: https:clients.tbmedia.ca/nal - is working fine on desktop, but have had some issue on mobile.

 

      ScrollSmoother.create({
          wrapper: "#page",
          content: "#content",
          smooth: 1,
          normalizeScroll: true,
          effects: true
      });

^ This is the code for mobile I have an if statement that adds normalizeScroll because if I don't the ScrollTrigger horizontal animation seems to be very jittery on horizontal scroll. 

document.addEventListener("DOMContentLoaded", function () {
      if ($('section').hasClass("community-pin-scroll")) {
      const svgElement = document.querySelector(".community-svg");
      svgElement.style.width = "100%"; // Ensure consistent width
      svgElement.style.height = "auto"; // Ensure consistent height
      const races = document.querySelector(".horizontal-scroll-container");

      function getScrollAmount() {
        return -(races.scrollWidth - window.innerWidth);
      }


      let tween = gsap.to(races, {
        x: getScrollAmount,
        duration: 3,
        ease: "none",
      });

      ScrollTrigger.create({
        trigger: "#community",
        start: "top top",
        end: () => `+=${races.scrollWidth - window.innerWidth}`,
        pin: true,
        animation: tween,
        scrub: 1,
        normalizeScroll: true,
        // horizontal: true,
        invalidateOnRefresh: true,
        pinSpacing: true,
      });

    //  ScrollTrigger.refresh();
      window.addEventListener('resize', () => {
        ScrollTrigger.refresh();
      });
    }

});

It feels as if the page jumps and sticks, this only seems to be an issue on mobile (not as bad on mobile chrome than safari) is there anything that jumps out immediately with my JS? 

 

If I remove ScrollSmoother completely on mobile the page scrolls fine but then I get a white flashing and empty space on my scrolltrigger horizontal animation. 

[Rodrigo]

Hi,

 

Is really hard to pinpoint a problem without a minimal demo. You can fork this starter template that includes all the GSAP Plugins:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Finally if possible include the debug link so we can test directly on our devices without any iframes:

Happy Tweening!

[GreenSock]

I would DEFINITELY remove this: 

window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
});

Remember that mobile devices fire off "resize" events whenever the address bar shows/hides. If you refresh() every time that occurs, it's a big waste. Plus by default recent versions of ScrollTrigger ignore mobile resize events in order to maximize performance and skip unnecessary recalculations (which you're forcing by firing a ScrollTrigger.refresh()). 

 

A minimal demo will certainly help. 

[terrorbyrd]

I think removing that code may have fixed it, still a bit of a jitter now (on the horizontal scroll), but the whole thing is looking a lot better, I will try and get a demo going.