Transform Text Choppy on Mobile (Chrome / Safari)

[iknownothing]

Hi awesome GSAP-ers,

 

I came across GSAP a few weeks ago while coding my website. I was honestly very impressed and I've been practicing it since.

 

The Issue

I am creating a hero/intro section with basic text transform animations. On desktop, it runs like a dream. However, on mobile, both Safari and Chrome, it is extremely choppy and jittery (text is shaking lol). This is the first such animation that does this (I've previously deployed more advanced animations and they work perfectly smooth on mobile.) I've scoured the forums for similar topics and tried many suggestions, nothing seems to solve it.

 

List of things I've already tried:

• Set rotation to 0.01 (apparently to solve pixel snapping). No effect.
• Added "will-change". No effect.
• Changed from using translate (xPercent and yPercent) to using left/right with static values in pixels. Same choppiness.
• Changed container div from flex to relative/absolute setup - I thought browser calculating flexbox might be overloading rendering. Nope.
• I tried changing the whole code block to static values only in pixels (no percentages). No improvement!
• Set "force3D: true".

 

Environment

• I tried on an iPhone 11 Pro and iPhone 12 Pro Max with latest iOS (15.2) on both Chrome and Safari.
• My project stack is NextJS (built-in with CSS Modules) and I deploy on Vercel.

 

I'm very confused why such a basic animation is causing this choppy performance when I smoothly ran more complex ones. I'm relatively new to animations and GSAP, so please excuse me if I have done some no-brainer mistakes.

 

I greatly appreciate your help in advance.

 

 

See the Pen ZEXvoJj by mmgamal (@mmgamal) on CodePen

[Cassie]

I'm afraid I don't really have much advice other than what you've listed!

 

You could try changing the scrub value so that the animation is 'eased' a little.

 

Maybe scrub:1 instead of scrub:true
 

Another thing that helped me in safari in the past was wrapping text in a div and animating that instead of the text itself. No idea why it worked though. 🙃 

...Maybe spans are the issue? From the splittext docs (I know you're not using split text but it may be relevant info)
 

• Uses divs, not spans - some browsers won't render transforms like rotation, scale, skew, etc. on spans. Actually, it's related to display:inline (the default for spans) which is why we're using divs with display:inline-block for better animation flexibility.

I hope something here helps.

 

Sorry I can't be of more assistance! 

[iknownothing]

1 hour ago, Cassie said:

You could try changing the scrub value so that the animation is 'eased' a little.

 

Maybe scrub:1 instead of scrub:true

 

This was definitely it. I tested by redeploying with scrub: 0.01, 0.5 and 1. Giving a value of 1 smoothed the whole animation noticeably. I guess there are too many frames being rendered on mobile that it needs at least 0.5 to throttle.

 

From the official docs:

Quote

• Soften the link between the animation and the the scrollbar so that takes a certain amount of time to "catch up", like scrub: 1 would take one second to catch up.

 

I missed that. Thank you so much for helping me!

 

My other problem is the animation feels too slow with scrub: 1. I set a fast easing: "power4.out" and duration to 0.2 (although I guess that doesn't affect anything really with scrubbing enabled).

 

Am I missing some animation concept that could make it feel faster?

[Cassie]

Sure - So the animation spans the whole distance between the start and end markers.

 

If you lessen that distance the animation will complete faster.

 

See the Pen YzrYRBg?editors=0010 by GreenSock (@GreenSock) on CodePen

[iknownothing]

Cassie, you rock. Thanks for making my Internet today.

[Cassie]

Ahh, no worries pal!

 

Glad I could help 🥳