Laggy and jittery transform animation on mobile

[laplage]

Hi,

I've created a vertical slide animation, with pinned images and text blocks appearances Y transforms.

On Desktop, Chrome, Firefox and Safari everything works perfectly, but on iOS with Safari and Chrome the pinning is set late, and the text animations are slow..

 

Here is the website preview URL we published https://lyoncasting.dodev.stereoweb.fr/

And the source code "powering“ it https://gist.github.com/nicolasbinet/f38de716b131d634394a77a00f248efb

 

If anyone has any idea ... thanks a lot in advance.

 

Nicolas

[GSAP Helper]

I don't have much time to dig into this, but have you tried setting ScrollTrigger.normalizeScroll(true) and/or ScrollTrigger.config({ ignoreMobileResize: true })? 

 

Beware that iOS Safari has a ton of bugs related to scrolling (those bugs are in the browser, not GSAP/ScrollTrigger). We've spent literally hundreds of hours try to solve/workaround them but there's no silver bullet. Apple has admitted that it's impossible to properly synchronize scrolling with the main thread. The above solutions tackle various challenges, but may not make it all exactly perfect.  

[laplage]

Hi,

Thanks a lot for this help and clarification.

The "ignoreMobileResize" config property seems to help with the Text animation, not much with the slide being pinned late or not as quick as I would have imagined from the examples I've checked.

Nicolas

[Rodrigo]

Hi,

 

Did you tried normalizeScroll()? That normally helps with issues like the one you're describing:

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

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

There's also an anticipatePin value you can set to have it try to pin beforehand. 

 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

[laplage]

Sorry for this late reply.

 

First thanks a lot for all your answers.

I used normalizeScroll and anticipatePinand this helped smoothing the behavior.

 

Nicolas