Hadrien

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 !

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..

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.