GSAP ScrollTrigger switches scroll-behavior property from "smooth" to "auto" and back on toggle?

[wandervogel]

I have noticed that ScrollTrigger briefly switches the scroll-behavior property of my scroller (the html element) from smooth to auto and back as it toggles between isActive states. 

 

Is this known/intentional behavior? In my case, it breaks the functionality of a native "back to top" button on the same page because the automated scroll is halted shortly after crossing the isActive threshold. 

 

I assumed using GSAPs own ScrollToPlugin would do the trick here but that didn’t help either. Neither did using zenscroll with window.noZensmooth set to true. Any help would be much appreciated.

Here is my code. I commented out the code I execute on toggle as it makes no difference to the behavior described above.

 

gsap.to(overlay[0], {
  scrollTrigger: {
    trigger: footer[0],
    start: "top bottom",
    end: "bottom top",
    scrub: 1,
    onToggle: (self) => {
      if (self.isActive) {
        // main.addClass("fixed bottom left right");
        // spacer.removeClass("hidden");
        // overlay.removeClass("hidden");
      } else {
        // main.removeClass("fixed bottom left right");
        // spacer.addClass("hidden");
        // overlay.addClass("hidden");
      }
    },
  },
  opacity: 1,
});

 

[GreenSock]

Indeed, that's very intentional. When ScrollTrigger.refresh() runs, it basically has to tear down any pinning that it did, temporarily return the scroll to the top to do all the measurements, and then restore it (you'll never see that happen - it's transparent to the user). If you've got scroll-behavior: smooth, it totally messes that up because the browser refuses to scroll to that spot immediately. It's sorta like applying a CSS transition to a property that's being animated by GSAP. 60 times per second, GSAP is updating the value, but if there's a CSS transition on it, the browser is like "NOPE, I don't care if you just made that change...I'm gonna drag it out over the course of ___ seconds". 

 

What's confusing me, though, is what you're saying the problem in your project is. Can you please provide a minimal demo that clearly illustrates the issue so we can see it ourselves? Are you saying that you cannot scroll back to the top? 

[wandervogel]

Thanks for the super swift reply! I went ahead and created the minimal demo you asked for only to find that I couldn’t reproduce the issue there. Even more confusingly – but in a good way – the issue doesn’t show up in the site I am working on anymore, either. I don’t really have an explanation, because the changes I made to the code seem purely cosmetic to me.

 

Anyway, I’m glad it’s working now but thanks anyway for getting back to me so fast and for offering some fascinating insight into the inner workings of GSAP.  It’s truly an incredible library that I couldn’t imagine myself working without anymore even though I still feel like I barely scratched the surface of what it’s capable of!

[GreenSock]

4 hours ago, wandervogel said:

Anyway, I’m glad it’s working now but thanks anyway for getting back to me so fast and for offering some fascinating insight into the inner workings of GSAP. 

Yay, glad you got it working. 

 

4 hours ago, wandervogel said:

It’s truly an incredible library that I couldn’t imagine myself working without anymore even though I still feel like I barely scratched the surface of what it’s capable of!

Aw, thanks. 💚 We love hearing that.

 

Enjoy! 💪