Rearrange / Animate CSS Grid Layouts with the View Transition API

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-name on 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.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

4 Comments

  1. Cool. It would be even better if it could animate when the screen width changes. Now, when changing the width of the window, the cards are teleported without animation. I tried to fix it, but it didn’t work out. Can you improve it?

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.