Timeline animation glitching only on iPhone

[grantbouff]

Hi GSAP fam,

 

I'm finalizing a project with an animation in the masthead that has some text slide in, then animate in with stagger. Everything is working great on the major browsers on desktop and even on an old android phone I have laying around. BUT, on iPhone, both with chrome and safari, i'm getting this strange jump in y position when the text is about to move. Would anyone have suggestions on how to fix this? 

thanks in advance

Link to the webflow: https://preview.webflow.com/preview/metierlabs?utm_medium=preview_link&utm_source=designer&utm_content=metierlabs&preview=356b33229e283954363ce60817727eb0&locale=en&workflow=preview
Link to a code pen that has the GSAP code: 

See the Pen LEVPrjK by Grant-Boufford (@Grant-Boufford) on CodePen.

[Rodrigo]

Hi @grantbouff and welcome to the GSAP Forums!

 

Unfortunately the preview link you shared doesn't actually work with devices, so  there is nothing we can actually test there 🤷‍♂️

 

Also by looking at the code you posted there is nothing that stands out as problematic, the only advice I'd give you is that using percentage values on X or Y is the same as using xPercent/yPercent:

// These do the same
gsap.to(target, { x: "50%" });

gsap.to(target, { xPercent: 50 });

The one thing I could suggest you is to try this:

// Play the timeline when ready
mainTimeline.progress(1).progress(0).play();

That will pre-render the Timeline before playing it, that could help, but again we're guessing blindly here, especially without a minimal demo that clearly illustrates the issue and unfortunately a production site is not the most adequate way to test possible issues. So I would strongly recommend you to create a minimal demo on Codepen that recreates the issue so we can test there.

 

Happy Tweening!

[grantbouff]

Hi @Rodrigo and thanks for the suggestions I'll give that a try.

 

I'll work on creating a demo in Code Pen tho in the meantime, this is a link to the staging site if helps https://metierlabs.webflow.io/

[grantbouff]

Hi @Rodrigo,

 

I got a new code pen with the animation working. I used Claude to extract the necessary html and css (made a few corrections) and then added the js Ive been using. hopefully this is more helpful.

Also, while looking through more posts in the community, some folks suggested adding a will-change and also a minimal z-rotation, so i've done that as well.

Thanks for any help you can provide. I appreciate it.

See the Pen myJbaJj by Grant-Boufford (@Grant-Boufford) on CodePen.

[Rodrigo]

Hi,

 

There is a lot of code to go through in your demo (170 lines of JS and over 200 lines of CSS) so we can't go through that with a lot of detail. Unfortunately we don't have the time resources to do that. From a quick glance, again, I don't see anything that looks like a potential issue. I tested your demo on my iPad (chrome/safari) without any issues, no flickering or jumps. Same on an android device (chrome/firefox). If this can'r be replicated in Codepen means the issue is not related to GSAP, perhaps something else in your setup is causing this. Could be applying a CSS transition to some of the elements you're animating with GSAP, or a CSS filter somewhere in the page (those are terrible for performance) or another plugin or library that you're using could be causing this. You'll have to check by removing chunks of code or other libraries/tools in order to see if that helps.

 

Sorry I can't be of more assistance 😞

[grantbouff]

No worries at all. I appreciate you taking a look so at least I know it wasnt something obvious hahah. 

 

Quote

I tested your demo on my iPad (chrome/safari) without any issues, no flickering or jumps.

Yeah i had the same result on my end when i tested on a pixel 3, an ipad air, and in the main browsers. It just appears to be iPhones... which i currently have tested on three of various ages and OS. 

But ill break it down to the the bones and then start adding back to see if i can find the issue and will report back 🤞when🤞 i find a solution.

 

 

[Rodrigo]

Hi,

 

We tested the debug view of the Codepen demo on iPhone and I'm afraid that we weren't able to replicate the problem 🤷‍♂️

 

Keep trying with removing parts of your app and see what happens.