Parallax Stutter on Mobile Device (Test on iPhone/IOS)?

[ESFOULA]

Hello GSAP Community,

 

I wanted to express my gratitude for sharing such an incredible plugin with the public. It's been making remarkable strides in the realm of web development.

 

Recently, I utilized the parallax example featured on CodePen, attributed as a GSAP demo. While it performs admirably on desktops, I encountered an issue when testing it on mobile devices. Unfortunately, there seems to be a peculiar stuttering effect while scrolling, causing the images to shake.

You can find my demonstration on CodePen at the following link: CodePen Demo

 

Additionally, I've integrated this demo into the following website: elsewedy-hospitality.com

 

I'm hopeful that someone from the community could assist me in resolving this issue.

Thank you in advance for your help!

See the Pen abxJEOY by efoula (@efoula) on CodePen

[GreenSock]

I don't have time to look right now on my phone, but that sounds like the classic problem of the browser using a different thread for scrolling than the main JS thread. Have you tried adding this?: 

ScrollTrigger.normalizeScroll(true);

Or you could apply scroll smoothing to force the scroll to be done on the JS thread, like ScrollSmoother with a small amount of smoothTouch. 

[ESFOULA]

@GreenSock

 

Hello, I appreciate your response and the time you've taken to address the matter. Your solution has largely resolved the issue, reducing stuttering by about 90%. However, there still seems to be a slight lingering stutter, and scrolling up has slowed down slightly.

 

Thanks.

[ESFOULA]

Hi again @GreenSock,

 

I wanted to provide you with an update regarding the implementation of your recommendation to set the normalizeScroll to true. After doing so and testing it across various iOS devices, I regret to inform you that this solution inadvertently disrupted other animations present on the same page. Additionally, the scrolling behavior became erratic, exhibiting unusual behavior even within the parallax feature itself. Therefore, I had to revert the changes by removing the recommended line for the time being.

 

 

[Cassie]

Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render.

Give this one a go?

 

See the Pen JjVWmJj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

debug link for mobile

 

If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area 

 

See the Pen jORBeKe?editors=1010 by GreenSock (@GreenSock) on CodePen

 

debug link for mobile

 

If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes.

 

I often remove certain animations or create more simplified fallbacks for mobile. You can do that  nice and easily with gsap.matchMedia()

 

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

Hope this helps!

[GreenSock]

5 hours ago, ESFOULA said:

I wanted to provide you with an update regarding the implementation of your recommendation to set the normalizeScroll to true. After doing so and testing it across various iOS devices, I regret to inform you that this solution inadvertently disrupted other animations present on the same page. Additionally, the scrolling behavior became erratic, exhibiting unusual behavior even within the parallax feature itself. Therefore, I had to revert the changes by removing the recommended line for the time being.

If you'd like some help beyond @Cassie's excellent advice, please make sure you provide a minimal demo and be more specific about what exactly is going wrong. You said "...inadvertently disrupted other animations..." but I have no idea what that means exactly. And "scrolling behavior became erratic" and "...unusual behavior even within the parallax feature...", but when I tested in the original demo you provided, I saw no problems whatsoever on my iOS device. What happened exactly and how can we reproduce it on our end?

 

You might also want to try this in addition to the normalizeScroll(true) option: 

ScrollTrigger.config({ ignoreMobileResize: true });

And are you using the latest version of all the files?