Jump to content
Search Community

My animations using GSAP are slow on Mobile devices

Hadrien test
Moderator Tag

Recommended Posts

Hi,

This is my first message here. I have been using GSAP for a project https://sample-card-ui.netlify.app/

 

The animations run smoothly on PC, but trying it on a few mobile devices showed a real problem (try it yourself !)

Do you have any suggestions ? With Chrome Developer tools I tried running it with CPU throttling (x6) and it was still good.

The code is accessible on the github link in the app (it is not perfect code. I am a Junior). Here's the file with the gsap timeline https://github.com/ledhad/sample-card-ui/blob/master/src/components/cards/Card1.tsx

My ideas so far :
- I don't think this is the CPU of the mobile I have tried since one of them was a pretty decent smartphone and it had the same non smooth problem.
- Chrome Developer Tool shows quite a few layout shifts. That might be it. But I don't see how I could avoid layout shift in that case.

- I have added "rotation : 0.01" in the gsap timeline. I saw somewhere that it could help smoothness.

I would love some replies so that I can do things better for the users.

Link to comment
Share on other sites

Hey Hadrien and welcome to the GreenSock forums.

 

To debug these sorts of things you should use your dev tools performance tab and record each section then dive down into what's going on. Doing that very quickly on your project I can see that there are layout shifts occurring during your transitions. From that along I can know that you're not sticking to the more performant properties to animate. Looking briefly at your code I see you animating paddingTop, border, and height which are all not very performant things to animate.

 

I also see that you're animating clip-path. That's not the most performant thing to animate so it's best to keep it to a minimum if you have to use it at all. I'm betting this is the primary thing that makes it slow on mobile but that's somewhat of a guess. 

 

Also you don't need to be loading CSSRulePlugin.

Link to comment
Share on other sites

Thanks for the answer.

I am new to this, glad I am learning. But I got the gist of your comments. I also found this which is really helpful : https://csstriggers.com/

Now I wonder then, what does GSAP uses under the hood. if I use x, or y, does it use transform translate ? If so I suppose that would be okay to use.
How do you think I should go about animating my card if I cannot use the height property ? 😕 It's kinda of the major thing, making the card grow as content is revealed..

Link to comment
Share on other sites

8 minutes ago, Hadrien said:

if I use x, or y, does it use transform translate ?

Yep!

 

8 minutes ago, Hadrien said:

How do you think I should go about animating my card if I cannot use the height property ? 😕 It's kinda of the major thing, making the card grow as content is revealed..

Sometimes it's unavoidable. It depends on the nature of the animation at times. Animating non-performant isn't a "don't do", it's an "avoid as much as possible" :) 

Link to comment
Share on other sites

Thank you for your answer again.

I was so excited about my animation! But in the end it only showed how much more I need to learn. Which is both exciting but also overwhelming. 

In any case, I will try to implement this solution instead : https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse

I wonder if there are any tools out there that would put out a warning when trying to animate height, left, top, etc...

Anyways, have an excellent week-end !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...