In a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this – e.g. Isotope – don’t play nice with CSS Grid.

Installation per NPM/Yarn:

yarn add animate-css-grid

Once imported use the wrapGrid function to let the library work its magic (using MutationObserver and FLIP animations)

import { wrapGrid } from animateCSSGrid

const grid = document.querySelector(".grid");
wrapGrid(grid);

animate-css-grid – Easy transitions for CSS Grid →