Why Scroll Animation is sluggish on mobile? I need guidance.

[Xavier0001]

I have created animation which is working fine but problem is that it is quite slow. I have tried playing with duration etc but animation still feels janky on physical devices (touch devices). Any help or advice would be highly appreciated.

See the Pen pvgKKyB by xavier0001 (@xavier0001) on CodePen.

[mvaneijgen]

I've tested this on my iPhone 12 Pro Max iOS 26.0.1 and I don't feel that it is sluggish, I can see a slight difference when I disable all filter CSS properties, but I would not say an average visitor would see that. 

 

If you find that the animation is slow I would look in to changing the end value for different screen sizes. Currently you use the same distance (scoped to the device), but a phone screen is much higher, so I would look in to https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ and change the end value to something that feels more appropriate on smaller screens. 

 

Hope it helps and happy tweening! 

 

See the Pen jEWKKpg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Xavier0001]

Quote

Currently you use the same distance (scoped to the device), but a phone screen is much higher.

Sorry! I didn't get your point. Can you explain it a little bit? Are you talking about this?

end: `${window.innerHeight * 4} top`,

Different mobiles have different viewport heights. So, in that case, what should I do? vw,vh units for the card's height?

[mvaneijgen]

No the cards look great, the way you scroll on desktop is different then the scroll on mobile. You find that it goes sluggish/slow on mobiel, so instead of setting end: `${window.innerHeight * 4} top`, try changing the 4 to a 2 and see how that feels, end: `${window.innerHeight * 2} top`,

 

And with gsap.matchMedia() you can change that for only mobile devices. 

 

Hope it helps and happy tweening! 

[Xavier0001]

Thank you for your recommendation! I have reduced the distance, which has increased the speed, and I appreciate your help. I have another question on a similar topic. I have pinned the "About" section, but when I scroll quickly, the pinning behavior seems off. Is this normal, or am I missing something? Should pinning be smoother?

[Xavier0001]

Right now, on pinning. Pinned section is jumping.

[Rodrigo]

Hi,

 

Maybe these posts by @GreenSock can help understanding the issue and the fact that is not related to GSAP and ScrollTrigger:

 

 

FInally give normalizeScroll a try:

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

 

You can combine it with the isTouch property in order to apply it only on mobile devices:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

Hopefully this helps

Happy Tweening!

[Xavier0001]

Hmm. Thanks for the guidance.