ScrollTrigger.normalizeScroll(true) making Lenis unresponsive on Firefox Desktop

[CecoSvidovski]

Hi, there!

I'm using your library with GSAP and ScrollTrigger but for some reason everytime I enable ScrollTrigger.normalizeScroll the scroll on the latest version of Firefox Desktop for Windows becomes unresponsively slow. On a Mac there's no such problem on any of it's browsers that I tested including the latest version of Firefox.

I managed to recreate the problem in the provided codepen by just changing the code to use GSAP and ScrollTrigger and enabling normalizeScroll. I know that normalizeScroll forces browsers to use the JavaScript thread but I don't understand how that impacts Firefox and why this problem happens only on Firefox for Windows.

The problem is that I need normalizeScroll because of the multi-threaded synchronization issue when scroll is handled on a different thread and the javascript thread runs a few milliseconds later which causes jumping/stuttering animations which in my case happens only on mobile phones.

Here's a demo: https://codepen.io/cecos/pen/yLZmpJg

Cheers!

[clementroche]

Lenis already runs scroll in the main-thread, why would you need normalizeScroll from ScrollTrigger ?

[CecoSvidovski]

If I don't enable normalizeScroll pinned animations start to jump/stutter. When I enable it it fixes everything everywhere and everything is super smooth. Except Firefox for Windows where the scroll becomes super slow and unresponsive.

EDIT: The jumping stuttering occurs only on mobile browsers with pinned animations. I think they even reference it in their website on normalizeScroll page. It jumps no matter if lenis is enabled or not.

[clementroche]

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/

ScrollTrigger.config({ ignoreMobileResize: true})

[CecoSvidovski]

The problem is not coming from the address bar and is persistent in all browsers on both Android and iOS.

I updated the demo - https://codepen.io/cecos/pen/yLZmpJg with only 1 of the animations I use that stutters and there are more. This one is not pinned and it still does jump. I just tried it on an iPhone 13 and a Galaxy S10 both using Chrome. It's one of the simplest animations that ScrollTrigger can be used for. If normalizeScroll is not enabled the picture jumps while scrolling.

Also thank you for your quick response! :)

[clementroche]

Have you tried syncTouch: true option from Lenis ?

[CecoSvidovski]

That fixed the jumping animations. It introduced another problem though. Now the scroll drifts/lags when you scroll in the oposite direction and sometimes doesn't even register (especially if you scroll faster).

EDIT: On Firefox for Android when you scroll down and then up it continues to register it as if you are scrolling down and you can go to the bottom of the page by scrolling up.

EDIT 2: It's possible to do that on Chrome for Android also. You just need to do it faster.

[CecoSvidovski]

I managed to fix the issue for now with the jumping animations without affecting scroll behavior by just using ScrollTrigger.normalizeScroll({type:"touch"})

[clementroche]

What version of Chrome/Firefox/Android do you use ?

[CecoSvidovski]

Actually the phone I first tested it on was Chrome 120.0.6099.115 - Android 10 and it has that problem. Now when you asked me I tested it on a newer phone and the problem isn't there. I suppose it's from the version of Android since the version of Chrome is the same. Also both phones are Samsung. I think I will stick with the solution you provided with syncTouch even though 10% of the phones worldwide are still using Android 10 according to statistics.

[CecoSvidovski]

Update: I just tested it on iPhone 15 Pro with iOS 17.2 on Chrome 120.0.6099.115. Absolutely the same problem and the touch feels weird, a little bit slower and unresponsive. Latest versions of Mozilla, Brave and Safari have completely the same issue. I'm going back to ScrollTrigger.normalizeScroll({type:"touch"}). No issues there and the scroll feels exactly how it is without any library.

To reproduce the problem - swipe up once and instantly swipe down, down, down fast and it basically goes to the bottom of the page registering as if I was swiping only up (scrolling down) the whole time. Also when you are scrolling down/up and decide to change direction it misses the first sometimes even the second interaction or it registers it as the oposite direction as explained in the previous sentence. There's also a weird delay on every interaction. It's only ms but on a new device that's 120hz it's just so noticable.

[clementroche]

yo, I improved syncTouch a lot in v1.0.33, making the scroll way more predictable. Can you give it a try ?

[spencercap]

yo, I improved syncTouch a lot in v1.0.33, making the scroll way more predictable. Can you give it a try ?

essential ios changes in this version! 👏 thanks

[clementroche]

i'm closing this issue due to lack of activity