SplitText with ScrollTrigger not working smooth on IPhone

[Gravitas]

Hi Dear,

I have created a component with split text and scroll trigger in a Next.js project. It works fine on Android but is not functioning properly on iPhone. Specifically, I'm experiencing jerking while scrolling. Can anyone suggest a solution to fix this issue?

See the Pen JjVMJZz by farhankhanui (@farhankhanui) on CodePen

[Rodrigo]

Hi,

 

Most likely this is related to the fact that you're animating the width property. Always avoid animating width/height/top/left properties because they require a paint and layout updates:

https://web.dev/articles/animations-guide#triggers

https://web.dev/articles/animations-overview#pipeline

 

You can try the demos in this thread, the one from the GSAP collection and the one by @PointC:

 

Hopefully this helps.

Happy Tweening!