Slow animation with stagger

[Daniel Hult]

Hi!

I was just trying out the stagger method in gsap to test some things out and tried to replicate your own "Advanced stagger in GSAP 3" codepen. Yours look very smooth, but why is mine so janky and "slow/glitchy"?

Here is your original one:

See the Pen jdawKx?editors=1010 by GreenSock (@GreenSock) on CodePen

See the Pen zYvKgoj by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel.

 

Not all elements animate equally. The biggest reason why your animation performs worse is actually because of your border-radius. Since you're scaling the elements, the browser has to continually update the border radius which isn't the most performant property. You can minimize this performance hit by using will-change: transform, but it's probably best to avoid scaling things with percent border radiuses if you can help it. 

[Daniel Hult]

Ahh, gotcha. Will just setting it to a fixed value work? Or is border radius something specific that can slow down animations?

[ZachSaucier]

10 minutes ago, Daniel Hult said:

Will just setting it to a fixed value work?

Test and see  

 

10 minutes ago, Daniel Hult said:

Or is border radius something specific that can slow down animations?

Like I said, border-radius is not the most performant of properties. The best answer, as usual, is test things out. See what works and what doesn't. 

 

If you need circles in your project, it might make sense to use a background image or something.