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:
Today I revisited its flagship demo, switching it over to use the View Transition API.
See the Pen Animate CSS Grid with View Transitions by Bramus (@bramus) on CodePen.
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
document.startTransition.
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:
See the Pen Animate CSS Grid with View Transitions (now with expanding squares!) by Bramus (@bramus) on CodePen.
This does not work on Firefox.
Correct. That’s because currently on Chrome 111 supports SPA View Transitions.