Laggy GSAP Animation when CSS Animation is off (Mobile Only)

[anzorAs]

Hello!

 

I am having a weird issue with my Animations when in a particular instance.

My page consists of: 

SVG-Letters that get animated in on page load

4 absolutely positioned blurred circles in the background that have a css animation on them.

For the sake of testing I've reduced the CSS animation so that it basically doesn't do anything (translate(0px, 0px) scale(1))

 

When I take the animation off the circles, the letter animation on mobile is really laggy, when I put the animation back it works well again. 

 

For this I have prepared a demo: 

https://layered-2023-git-mobile-tag-anzorasadovs-projects.vercel.app/en

When navigating to the site with mobile you will notice the svg animation being laggy. 

Clicking on the "toggle animation blob" button with enable the animation on the circles (which, again, doesn't really do anything)

Clicking on "rerun" will rerun the svg animation, which will run smoothly.

 

I am really curious about what the issue might be and I hope you guys can help me figure it out. 

 

Thanks!

[mvaneijgen]

Hi @anzorAs, if I'm correct you can also share a link the Vercel environment where we can see and modify the code right? You're sharing a link to just the preview doesn't allow us to modify the code or even see the code, so this way we can't help you debug. 

 

If you can't share a link to a code editor in Vercel can you maybe recreate the demo in something like Codepen or Stackblitz? Here are our templates https://stackblitz.com/@GreenSockLearning/collections

 

What you can try your self is setting will-change: transform; to the elements that will have there transforms change (in your CSS), this might already help. And just to be sure there are no transition: all .3s ease-in; in your CSS, right? 

 

[anzorAs]

Hi @mvaneijgen

 

Thanks for your help!

Setting "will-change: transform" to the ".blob" class  did in fact fix the lag. I find it weird though, since it actually does not change.

So you did help me fix the issue, but I dont get why 😅

Also there were "all" transitions in my code. I took them out but it didnt have any effect.