ScrollTrigger Pin glitches when scrolling more than 100px at a time

[Echelon1]

Hi!
I'm working on a website where I have 2 scrollTrigger pins on the homepage. When I use my macbook trackpad for scrolling everything is smooth and the animations don't glitch out. When I switch to my Windows PC however. The scrollwheel on my mouse scrolls 100px at a time.

I logged the document.documentElement.scrollTop value in an onUpdate function and I can see my mouse scrolls 100px at a time. This scroll behaviour completely glitches out the scrollTrigger pin animations. Sections go through eachother and don't jump back.

When I grab the scrollbar by the scrollbar-handle and I scroll throughout the website everything is smooth and there is no glitching.
I added anticipatePin: 1 in the hopes that this would fix everything but no luck yet.

The problem with this glitch is ofcourse that you can only reproduce it without a smooth scrolling trackpad/mouse. Windows doesn't have scroll smoothing by default like mac has.

Any help would be greatly appreciated!

[GreenSock]

Welcome to the forums, @Echelon1! Sorry to hear about the trouble. Unfortunately we don't have the resources to troubleshoot live sites (that's a BIG ask), but if you can provide a minimal demo like in CodePen we'd be happy to answer any GSAP-specific questions.

 

I can offer a few comments/questions: 

1. ScrollTrigger doesn't care if you scroll 100px, 2px, or 500px. From its perspective, it is merely updating the values accordingly. I don't think I've ever seen or heard of someone reporting that ScrollTrigger suddenly misbehaved if you scrolled in large chunks. This sounds like potentially logic issues in the way you set things up (maybe?) For example, sometimes people build things so that ScrollTriggered animations overlap, like if you use toggleActions or a large scrub value and then scroll quickly, the prior animation may not be finished when the next one starts. That's not a ScrollTrigger bug - that's a logic issue in the way things were set up. We've provided features to help mitigate that, like fastScrollEnd and preventOverlaps (see docs). 
2. Based on the non-standard scrollbar, I'm guessing you're using a 3rd party scrolling library? That may be the root of the problem. I'd definitely recommend removing that just to see if it resolve things.  
3. Have you tried stripping things back? The key in troubleshooting is isolate, isolate, isolate. Strip it down, then start building it up and see when it breaks. 
4. Have you tried enabling/disabling the new ScrollTrigger.normalizeScroll() feature? Perhaps that would solve it. 

If you still need some help, you could either post in the "Jobs & Freelance" forum, contact us for paid consulting, or create a minimal demo and post back here with your GSAP-specific question (we can't offer free performance audits, though - that's a deep topic). 

 

Good luck!

[Echelon1]

Hi @GreenSock,

We fixed the issue! Apparently the docker container running on staging was using node v14.18. We didn't find anything wrong with it when running the project locally on node v14.18 but the errors happened when building the Nuxt files. We changed the docker version to the most up-to-date LTS version of node (16.14.2) and now it's smooth animations all around!

Note:
- We didn't use any 3rd party scrolling library, just webkit to change the look of the scrollbar so if anyone in the future uses a 3rd party scrolling library that might still be your problem!
- Our project uses nuxt-gsap-module

Hope this can help people in the future!

[Echelon1]

We did some further investigation and came to another conclusion.
 

The nuxt-gsap-module we are using was version 1.6.0 which has GSAP 3.9.1 as a depencency.

But in our package.json we had it noted like this:
 "nuxt-gsap-module": "^1.6.0" -> The "^" in front of the version number makes sure the package gets updated to the latest version.

Which is nuxt-gsap-module 1.7.0 and has a dependency of GSAP 3.10.2

Now it seems when we we're using 3.9.1 there were no glitches or bugs.
But when nuxt-gsap-module got updated and used GSAP 3.10.2 in turn, the glitches started happening.

We are still investigating but when we figure this whole thing out, I will come back to this thread.

[Echelon1]

Ok our suspicions were correct.

The glitches were causes by updating to GSAP 3.10.2
We added:

    "nuxt-gsap-module": "1.6.0",
    "gsap": "3.9.1"

To our package.json file (Note without the "^" so they don't auto-update)
And now everything is working fine. So it seems there was a bug/glitch with GSAP 3.10.2

[Echelon1]

@GreenSock so apparently it had nothing to do with the scrolling. The bug only occurs when using GSAP 3.10.2

 

Since at some point we will have to update, is there anything I can do to help? I have no idea how i'm even going to find the cause of this problem.

[OSUblake]

Can you provide a minimal demo that shows the issue you are experiencing so we can figure out the issue? You can use Nuxt on CodeSandbox if you'd like. Here's a starter template.

 

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

 

 

[GreenSock]

Yeah, @Echelon1 a minimal demo would be GREATLY appreciated. I want to make sure any issues are resolved in the 3.10.3 push we're prepping ASAP. Thanks!

[GreenSock]

Random guess: you're using a 3rd party smooth scrolling library and forgot to call ScrollTrigger.update() whenever that library adjusts the scroll position based on wheel events. Before 3.10.0, we had a "wheel" listener that forced updates but removed that to streamline performance (it seemed a tad wasteful since "scroll" events already handle the update and "wheel" events should trigger a "scroll" event...except if you're using a 3rd party library that's circumventing that). 

 

Again, I'm just guessing here; it's tough to troubleshoot blind. 

[Echelon1]

On monday I will prep a codesandbox via the link provided by @OSUblake, I really hope I will be able to replicate the bug!

[GreenSock]

You can try this - if it fixes things, my suspicion was correct: 

document.addEventListener("wheel", () => ScrollTrigger.update());

 

[Echelon1]

Hi, @GreenSock and @OSUblake,

Monday was just too far away, since this issue is eating me alive. I've just tried to replicate the whole situation to the best of my ability.

https://codesandbox.io/s/gsap-glitch-replicated-sandbox-2y4wtj?file=/pages/index.vue

I'm pretty much a noob at codesandbox, I removed the yarn file and just ran 'npm run dev' in a new terminal.

It seems I couldn't replicate the issue on this simple layout. HOWEVER I did notice that whenever I scroll to the bottom of the page and I resize the window vertically, everything goes haywire and it looks alot like the glitches i'm getting om my production site.

 

To reiterate, I don't use any 3rd party smoothscrolling library.

Edited April 10, 2022 by Echelon1
extra information

[Echelon1]

Lastly I wanted to add a video of the glitch on my live site so you guys can see the behaviour for yourselves.

Note that this is without resizing the window.

 

If you want to I can provide a video of the same website working perfectly on GSAP 3.9.1

It's 6 in the morning here in belgium and I haven't slept yet. So any further response from me will come in a couple of hours probably!

[GreenSock]

Thanks for doing that so promptly! 👍

 

That looks like the known pinning-related bug that's already fixed in the upcoming release. Did you happen to try the beta? 

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

 

 

[GreenSock]

Just so you know, version 3.10.3 is officially released, so please try updating and let us know if the issue is resolved. 

[Echelon1]

On 4/12/2022 at 8:09 AM, GreenSock said:

Just so you know, version 3.10.3 is officially released, so please try updating and let us know if the issue is resolved. 

 

Hi @GreenSock, sorry for the late answer. I have updated the project to 3.10.3 and all is in order now!