Animating grids

Another open issue in the CSSWG Draft repository is the ability to animate every grid aspect natively. So far, transitions have not covered many aspects, and animations can be complex.

The whole issue from 2021 can be found here: https://github.com/w3c/csswg-drafts/issues/6736.

Understanding the goal of grid animations

Smoothly animated grids can significantly enhance the user experience. For example, these animations can indicate new or removed elements within a grid, allow a user to smoothly resize the grid if there are power-user applications that let the user highly customize the UI, or make the grid reflow in case of content changes.

The CSSWG Draft issue mentions a library called animate-css-grid. We can use it to animate our CSS grids fully.

Using the animate-css-grid library

To begin, we will install the library with npm. We can then attach the animations using the following code snippet:

import './node_modules/animate-css-grid/dist...