Scroll Trigger jumpy animations on mobile

[CecoSvidovski]

Hello there!

 

I'm using the latest GSAP and ScrollTrigger libraries and am getting jumpy animations on mobile. Both on Android 10 - the latest Chrome and Mozilla, and iOS 17.2 - latest Chrome, Safari, Mozilla and Brave. This happens when I try to implement a parallax effect. The problem occurs on your parallax demo too. 

 

When I enable normalizeScroll the problem disappears from both iOS and Android but it introduces a new problem on iOS. On iOS the scroll starts lagging a lot when my finger is on the screen. When my finger leaves the screen everything continues smoothly.

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

Yeah, indeed iOS and Safari especially continue to be such a thorn on the side. Normalize Scroll is the best that can be done in order to address some issues, especially on iOS.

 

I'm no expert on the subject, but my guess in terms of what happens when you keep your finger on the screen, could be related to the fact that the JS thread and the one that handles the scroll (or maybe just the one handling the scroll) are updating constantly while the finger is on the screen thus creating the lag.

 

Unfortunately I don't have an android 10 device (mine is running android 9) and I'm finishing updating my ios device to check another solution.

 

I created a fork of the codepen you linked using will-change: contents; on the sections without normalizeScroll, can you test it and let us know how it works? Here is the debug view (no iframes) so you can test directly on your devices:

https://cdpn.io/pen/debug/WNmeyRO

 

Happy Tweening!

[CecoSvidovski]

 

On 12/20/2023 at 6:24 PM, Rodrigo said:

Hi,

 

Yeah, indeed iOS and Safari especially continue to be such a thorn on the side. Normalize Scroll is the best that can be done in order to address some issues, especially on iOS.

 

I'm no expert on the subject, but my guess in terms of what happens when you keep your finger on the screen, could be related to the fact that the JS thread and the one that handles the scroll (or maybe just the one handling the scroll) are updating constantly while the finger is on the screen thus creating the lag.

 

Unfortunately I don't have an android 10 device (mine is running android 9) and I'm finishing updating my ios device to check another solution.

 

I created a fork of the codepen you linked using will-change: contents; on the sections without normalizeScroll, can you test it and let us know how it works? Here is the debug view (no iframes) so you can test directly on your devices:

https://cdpn.io/pen/debug/WNmeyRO

 

Happy Tweening!

My coworker with the iPhone 14 is not here but soon I think he'll be here and I'll test it. On the Galaxy S9+ though the animations are still jumpy but not that much. I managed to test it on Safari on an iPhone X and animations are also jumpy. It's mostly noticeable when the address bar shows/hides.

In my website I use a div which I animate using yPercent and there the problem is so much more noticeable. I'll try implementing the parallax using background-position. The thing is I've seen many websites with parallax effects and there I haven't spotted this bug on any device I've checked. They were using translate3d though to make the effect. I don't know if that helps in a way just asking. Here's an example - autexacoustics.com 

In the above mentioned website every animation is very smooth and not jumping at all even when address bar shows/hides. 

[Rodrigo]

Hi,

 

The only advice I could give you is to use will-change: transform on the elements being animated (if you are animating yPercent on them). Other than using that and normalizeScroll() I'm afraid that this pretty much sits on the category of rendering issues on Safari and iOS.

 

Other than that I have no other advice to give you, sorry about it. I wish I had a silver bullet for you in this case 😞

Happy Tweening!