Animation of elements within a flexbox "stutter"

[Struggly]

Hey there, first of all - I love your work! GSAP is truly awesome!

 

Today I noticed some strange behavior: I have a bunch of items arranged in a pyramidal shape using display: flex on the parent elements. I'd like to add a very basic animation to all of the flex items, e.g. let them scale from 0 to 1. When I do this using fromTo, the animation stutters and the frame rate drops considerably. If I try to achieve the exact same effect using CSS Animations, everything runs smoothly. I created an isolated pen where you can directly compare the GSAP and the CSS animation. If you lower the amount of flex items or stagger the animation, the frame rate increases. I can only assume that for some reason too much of the DOM is being repainted at the same time which causes the stutter, maybe the flexbox is trying to rearrange items while GSAP applies the inline styles - not sure though... Any suggestions are highly appreciated, thanks a lot and keep up the great work!

See the Pen zYPBJLN by bjoernmuenker (@bjoernmuenker) on CodePen

[OSUblake]

Hi BogglDevs,

 

Have you tried adding will-change to your CSS? That's automatically added when you do CSS transitions/animations, so maybe that's the difference.

 

.row-item {  
  will-change: transform;
}

 

[Struggly]

Works well, thanks a lot!!

[GreenSock]

Yep, browsers have changed their rendering techniques quite a bit over the past few years. By default, GSAP uses 3D transforms DURING the animation to optimize performance (historically that was always the way to trigger GPU offloading) and then switches back to 2D when the animation isn't in-progress. However, it appears as though some browsers exact a cost when switching now (they never used to) and they don't always GPU offload with 3D transforms. Setting will-change: transform helps those browsers trigger the layerizing that boosts performance. Just beware that doing so can make things look pixelated if you scale up very much (it's like taking a screenshot of the element and then zooming in on that).