About 5 years ago I found this neat library called
animate-css-grid that allows you to use transitions in your CSS Grid. As new items get added or change size, they animate:
Switching to View Transitions was a breeze:
- Set a unique
view-transition-nameon each element in the grid.
- Wrap the DOM updates in a call to
And with that, the grid will nicely reshuffle.
If you take a close look at the reworked version, you’ll find some of the finer details – such as a tiny delay per transitioned element, or the way the elements grow – are missing. Nonetheless, I find the result already to be pretty amazing. Just a few lines of JS and CSS, and you have an animated grid layout 🙂
Update 2022.05.12: I had Jake help me out to get the expanding animation right: