New to GSAP: Having problems setting up a demo with laggy animations

[biscuitcruncherdev]

https://gsap-react-basic-f48716-5hhvqu.stackblitz.io

 

I've tried setting up a demo in stackblitz but the animations aren't running.

 

These animations run fine on desktop but when viewing on mobile, it lags aggressively in the middle. I've tried resizing my images and also changing from using ref to using the source and classes. I haven't solved the issue yet.

 

Perhaps you can spot it from what I have here? Or at least tell me what I'm doing wrong with the demo.

See the Pen by (@) on CodePen

[GreenSock]

It looks like you're trying to animate things that don't exist. If you look at the console, you'll see a bunch of warnings about that. For example, you tried to animate '.nameheading' but there are no elements that have that class. 

 

Maybe you saved your Stackblitz before you updated the HTML? This is the one I'm looking at: 

https://stackblitz.com/edit/gsap-react-basic-f48716-5hhvqu?file=src%2FApp.js

[biscuitcruncherdev]

On 2/12/2024 at 12:06 PM, GreenSock said:

It looks like you're trying to animate things that don't exist. If you look at the console, you'll see a bunch of warnings about that. For example, you tried to animate '.nameheading' but there are no elements that have that class. 

 

Maybe you saved your Stackblitz before you updated the HTML? This is the one I'm looking at: 

https://stackblitz.com/edit/gsap-react-basic-f48716-5hhvqu?file=src%2FApp.js

Thank you, I appreciate your reply.

 

I've figured it out and was able to style it but I can't seem to replicate the error?

I have some CSS transitions from Tailwind and another GSAP timeline on the sidebar that appears on every page (I put that in the demo as well). Do you think either of these things could affect its performance?

Like I said, on desktop it works fine but checking the mobile version, it just breaks.

[Rodrigo]

Hi,

 

Unfortunately without a demo that replicates the issue is really hard for us to see what could be the problem. 

 

If your problem only appears in your local dev environment, my suggestion would be to start removing stuff until it works or create something new from scratch without tailwind in order to see if there it works as you expect. Then start adding other packages and styles until it breaks, then you'll have the culprit of the problem and you'll be able to find a solution for it.

 

Happy Tweening!

[GreenSock]

13 hours ago, biscuitcruncherdev said:

I have some CSS transitions from Tailwind and another GSAP timeline on the sidebar that appears on every page (I put that in the demo as well). Do you think either of these things could affect its performance?

If you have CSS transitions on the elements you're animating with GSAP, that would DEFINITELY cause performance problems. Every time GSAP updates the property, the browser basically says "NOPE! I won't apply that yet - I'm gonna drag that out over the course of ___ seconds...", over and over and over again during the animation, on each tick. No bueno. So I'd definitely recommend making sure you don't have CSS transitions on those elements.