Scroll-behavor:smooth issue!

[Matt DD]

Ah this is so frustrating, I've definitely had this issue in the past spent ages debugging it to find out it was this. And just done it again now. Scroll behavior smooth is default on all my sites (because why wouldn't you? it's a single line of code that vastly improves anchor links. I only use gsap when i require scrolly animation so don't use it too often)

I can see when i resize it tries to remove and remove and re-add it but it's obviously not working correctly!
Can there be some console warning or something so I don't waste my time again again.
I also saw theres a warning on the scroll to documentation page, it needs to be on the scrolltrigger page too!

Then scroll down the page and resize your browser, the positioning of the horizontal pin goes off (moves up the page)

There should be a more robust solution built into the library that removes it to re-calcuate and then re-adds it

To replicate:
Just add 
html {scroll-behavior:smooth}
to the css of this demo

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

[GreenSock]

Sorry about the confusion there, @Matt DD! This was a very tricky bug that'd only show up if you load the UMD version of ScrollTrigger AFTER loading the core GSAP file (the order of loading was critical). That should be fixed in the next release of ScrollTrigger which you can preview here: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

This fixes it for you in the demo, right?: 

See the Pen pvbNoye?editors=0110 by GreenSock (@GreenSock) on CodePen.

 

Another fix for the current (or older) version would be to add this: 

window.addEventListener("resize", () => gsap.set("html", {scrollBehavior: "auto"}));
ScrollTrigger.addEventListener("refresh", () => gsap.set("html", {scrollBehavior: "smooth"}));

 

[Matt DD]

Hi thanks for looking into this,
Unfortunately I'm still seeing it

See the Pen JoKbdjb by mscottDDTeam (@mscottDDTeam) on CodePen.

I've added some JS that just scrolls down and triggers a refresh, you can see the pinned section still jumps up,

Also that example has a load of extra stuff in there but you can really simply it down

Also this snippet doesn't seem to work either
 

window.addEventListener("resize", () => gsap.set("html", {scrollBehavior: "auto"}));
ScrollTrigger.addEventListener("refresh", () => gsap.set("html", {scrollBehavior: "smooth"}));

[GreenSock]

Just checking - did you clear your cache? 🙂

[GreenSock]

I'm not seeing any issues at all. Your CodePen was referencing ScrollToPlugin but you weren't loading that, so there was an error immediately which probably halted all JS execution. Once I fixed that and made sure I cleared my cache so I wasn't getting a cached version of that ScrollTrigger file, it seemed to all work exactly as expected, but maybe I'm missing something? 

[Matt DD]

That's odd looks like it may have been a cache issue, but I forked the one you sent and was still seeing it on that too
I thought codepen wouldn't cache so much but maybe not.

Thanks for your help that's great!

(I was also trying to simplify my version which is why you saw the scrollToPlugin error)

[GreenSock]

36 minutes ago, Matt DD said:

(I was also trying to simplify my version which is why you saw the scrollToPlugin error)

I figured. No worries.

 

36 minutes ago, Matt DD said:

That's odd looks like it may have been a cache issue, but I forked the one you sent and was still seeing it on that too
I thought codepen wouldn't cache so much but maybe not.

Thanks for your help that's great!

So once you cleared your cache and confirmed that you were getting the updated version of the ScrollTrigger file, it all worked as expected, right? I just wanted to confirm. 

[Matt DD]

1 minute ago, GreenSock said:

So once you cleared your cache and confirmed that you were getting the updated version of the ScrollTrigger file, it all worked as expected, right? I just wanted to confirm. 

All good thanks!