ScrollTrigger not refreshing properly

[hobiew]

Hi! I'm running into a problem using scrolltrigger and I would hope anyone can point me into the right direction. I already tried to recreate it locally, but it does not happen there. So it is likely a CSS or third party script interfering. However I'm lost and perhaps someone else had the same problem and could help me out. 

So I'm using scrolltriggers on this website: https://www.ng-engineering.nl/home/

Same from this page: https://www.ng-engineering.nl/test/ which has almost nothing on it.

However every time I resize all the triggers jump to the top of the page, like it does not account for me already having scrolled down. When I resize at the top of the page all triggers get back to the right position. 

 

What could I do differently?

 

My current JS code is this:

 

// Wait until DOM is ready

document.addEventListener("DOMContentLoaded", function () {

  // Wait until images, links, fonts, stylesheets, and js are loaded

  window.addEventListener(

    "load",

    function () {

      // Check if GSAP is defined

      console.log("local loaded");

      if (typeof gsap === "object") {

        // Register ScrollTrigger plugin

        gsap.registerPlugin(ScrollTrigger);

 

        window.addEventListener("resize", function () {

          ScrollTrigger.refresh();

          console.log("ScrollTrigger refreshed due to window resize");

        });

 

        let mm = gsap.matchMedia();

        //all

        mm.add("(min-width: 0px)", () => {

          //end all

        });

        //desktop

        mm.add("(min-width: 991px)", () => {

          console.log("GSAP desktop");

          const dienstenTl = gsap.timeline({

            scrollTrigger: {

              trigger: "#Cards_diensten",

              start: "top 80%",

              toggleActions: "play none none reverse",

              markers: false,

              invalidateOnRefresh: true,

            },

            onStart: function () {

              gsap.set("#Cards_diensten .card", { pointerEvents: "none" });

            },

            onComplete: function () {

              gsap.set("#Cards_diensten .card", { pointerEvents: "auto" });

            },

          });

 

          dienstenTl.to("#Cards_diensten .card", {

            opacity: 1,

            y: "0%",

            duration: 0.3,

            ease: "power1.inOut",

            stagger: 0.05,

          });

        });

        //mobile

        mm.add("(max-width: 990px)", () => {

          console.log("GSAP mobile");

        });

        //end gsap defined

      }

      //end load

    },

    false

  );

  //end dom ready

});

 

[hobiew]

Adding this line right under register scrolltrigger seemed to do the trick: 

ScrollTrigger.normalizeScroll(true);

 

Does anyone know why this is needed? I never had this issue before.

[GreenSock]

Are you sure that one line fixed everything for you? That sounds very strange to me. 

 

I looked at your second link and didn't see anything. I must be missing something. 

 

This is definitely not a good idea: 

// BAD!
window.addEventListener("resize", function () {
  ScrollTrigger.refresh();
});

ScrollTrigger automatically does that for you in a debounced way for performance - your code would cause a LOT of load on the CPU wastefully. 

 

Other tips: 

• Make sure you don't have CSS transitions applied to anything that GSAP is controlling. 
• Don't set scroll-behavior: smooth on the page.

 

If you still need help, please make sure you provide a minimal demo (like a CodePen) that clearly illustrates the issue and tell us exactly how to reproduce it. Unfortunately it's not realistic to troubleshoot a live site. We really need to be able to tinker in an environment like CodePen/Stackblitz. 

[hobiew]

Hi Jack, 

 

Thanks for your reply.  Yes I already removed the manual refresh. And I thought it fixed everything! Until I went on mobile and my whole scrolling behaviour was broken, so I removed that line again. 

 

I understand you need a minimal demo, however I already tried to replicate this issue in a codepen with no succes. So something must be interfering, however I have no idea what and I'm not in a position to just start over fresh. 

 

So I was wondering if anyone has had this problem. 

 

2nd link should illustrate the problem now. Scroll down though. Whenever I resize (even 1 pixel in width) the start and end position jump to the top of the page. However when I resize at the top of the page, they return to their correct position. 

 

So any help/suggestions would be very welcome! 

https://www.ng-engineering.nl/test/

[GreenSock]

You have scroll-behavior: smooth on your page. Definitely remove that. Sometimes a 3rd party library adds that.

 

You're also using a pretty outdated version of GSAP (3.12.0 instead of 3.12.7). I'd strongly recommend updating. 

[hobiew]

Will try your suggestions! 

Safari on a mac seems to work fine. But chrome and firefox are causing issues. 

[hobiew]

I think it was the scroll behaviour smooth. Would you mind explaining why this is a problem? Im keen to learn more. 

[GreenSock]

33 minutes ago, hobiew said:

I think it was the scroll behaviour smooth. Would you mind explaining why this is a problem? Im keen to learn more. 

If you do a search in the forums, you'll see lots of explanations...

 

Basically, scroll-behavior: smooth is just like applying a CSS transition to an element. When GSAP tries to make a change, the browser is like "NOPE! I'm not gonna apply that right away...I'm gonna drag that out over time..." In order to do all of its calculations for where various triggers start/stop, ScrollTrigger needs to set the page (temporarily, invisibly) to the very top...and then it reverts it back to where it was after the calculations are done. But if you've got scroll-behavior: smooth, when GSAP tells the scroll position to immediately go to the top, the browser REFUSES. It tries to "smooth" that out over time rather than obeying GSAP's instructions to set the scroll position to something new. So it throws off all the calculations. 

 

See the issue? 

[hobiew]

Allright, thank you so much for the explanation and help. Great service as always. Hope you have a wonderful day.