Parallax effect jitter on mobile with ScrollTrigger

[JarvisChao]

version: 3.11.4

Hello~ I try to set the parallax effect to my section element, everything is find with desktop but when using mobile it jittering hard. Is there something wrong with my code or any problem?

Codepen: https://codepen.io/jarvis73045/full/yLxNpeB

iPad

https://user-images.githubusercontent.com/38325453/219649078-c8d2a1fb-20d8-4d5e-8c82-1ce7b9231844.mp4

iPhone 8

https://user-images.githubusercontent.com/38325453/219659281-64b6ac1e-151b-43b4-bc55-eac0dd2f4622.mp4

[jackdoyle]

iOS has a bunch of bugs (in the browser itself), and it is impossible to synchronize the scrolling thread and JS thread. That's why we put hundreds of hours into the ScrollTrigger.normalizeScroll() feature. It's NOT a silver bullet, but it's our best crack at solving a lot of the issues. Try adding this one line to your code:

ScrollTrigger.normalizeScroll(true);

Read about it here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

Does that help?

[JarvisChao]

iOS has a bunch of bugs (in the browser itself), and it is impossible to synchronize the scrolling thread and JS thread. That's why we put hundreds of hours into the ScrollTrigger.normalizeScroll() feature. It's NOT a silver bullet, but it's our best crack at solving a lot of the issues. Try adding this one line to your code:

ScrollTrigger.normalizeScroll(true);

Read about it here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

Does that help?

I've tried to use ScrollTrigger.normalizeScroll(true), but the scrolling fluency of the entire page has become poor.

https://user-images.githubusercontent.com/38325453/220079397-44f8df47-e609-44ec-9444-d0a5a0f59029.mp4

　 　 This website using ScrollTrigger without setting normalizeScroll has no jittering problem, but i can't find out how they did it. https://cookthevibe.com/

Is there any other solution?

[jackdoyle]

I don't know what that site is doing (it is leveraging GSAP though), but one thing you can try is applying something like ScrollSmoother. The fundamental problem is that iOS handles scrolling on a totally different thread which is NOT synchronized with the main JS thread, so it'll actually paint the scroll changes and then a few milliseconds later the JS thread runs and adjusts things the way it should be. Apple has confirmed that it is absolutely impossible to synchronize them. Plus there are a bunch of other bugs in Apple's browser related to scrolling. When you use something like ScrollSmoother (or another smooth scrolling library), you're fundamentally unhooking the scrolling thread and handling it all on the JS level (at least for most smooth scrolling libraries that's how it works).

You are using the latest version of GSAP/ScrollTrigger, right?

If you do try ScrollSmoother, don't forget that by default it disables smooth scrolling on touch devices, so you can just set it to a very small amount like smoothTouch: 0.1.

If you'd like to try ScrollSmoother (it's a members-only plugin for Club GreenSock), you can use the "gsap-trial" package on NPM or use the URLs listed at https://greensock.com/try-plugins (those only work on CodePen, CodeSandbox, Stackblitz, and locally - you can't deploy the trial versions on a different domain)

[JarvisChao]

Yes, I'm using the latest version of GSAP/ScrollTrigger, thanks for the suggestion, I'll look into it. 🙏🏼

[MiniOcean404]

pinType: "fixed", 可以解决这个问题，并且和视频中 https://cookthevibe.com/ 是一致的