Animating flex properties
Flexbox lets you animate between different values of some of the Flexbox-related properties. Those animations will be nice and smooth. For example, you could have a flex item that grows when hovered with a pointer.
But, not all Flexbox-related properties get a smooth animation. For example, you won’t get a smooth animation between two values. You’ll get a jumpy switch instead.
Smooth animations
flex-basis
You could have a flex item that doesn’t grow or shrink, and instead changes its flex-basis size.
flex-grow
You could make a flex item grow at a higher rate than others, making it bigger.
flex-shrink
You could stop a flex item from shrinking.
gap
Gap can be continuously animated, too.
Jumpy animations
order
You can’t smoothly animate order. You’ll get a discrete jump.
All alignment properties
This applies to , align-self, .
Animate margin to move flex items around
margin can be useful for moving flex items around, given that alignment properties like are discretely animated.
Animating between auto and non-auto margin will be jumpy
It would be cool to use an auto margin to push some flex items away in a smoothly animated way, but that’s not possible.
Sometimes you might get away combining jumpy and smooth animation
You can combine an alignment property change with percentage translations, and make it appear like a smooth animation if the elements don’t travel too far.
Go from jumpy to smooth with the FLIP technique
To animate changes between alignment values, or inserting and removing flex items, you’ll need to use JavaScript and something like the FLIP technique.
- You’ll read and save the positions and sizes of all flex items.
- Then, you’ll change the value of an alignment property or something else.
- Then, you’ll read the new values.
- Then, you’ll animate from the old values to the new values.
- This will create the impression that you’re animating between two seemingly unanimatable states.