animate-css-grid

Animate CSS Grid

This small script makes it super easy to make sure your CSS grid transitions gracefully from one state to another. If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically smoothly transition to its new configuration.

Main Codepen Example

Other Codepen Examples

How to use it

Just call the wrapGrid method on your grid container, and optionally provide a config object as a second argument.

ES6 Module:

yarn add animate-css-grid

import { wrapGrid } from animateCSSGrid

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

const { unwrapGrid, forceGridAnimation } = wrapGrid(grid, {duration: 500});

// optionally, if you are changing grid layout with inline styles and still want the grid to animate
grid.style.width = '200px'
forceGridAnimation()

// later, to remove transitions
unwrapGrid()

Or from a script tag:

<script src="https://unpkg.com/animate-css-grid@latest"></script>

<script>
  const grid = document.querySelector(".grid");
  const { unwrapGrid } = animateCSSGrid.wrapGrid(grid, {stagger: true});
</script>

Optional config object:

{
  // default is false
  stagger: true,
  // default is 250 ms
  duration: 500
  // default is 'Quadratic.InOut'
  easing: 'Sinusoidal.InOut'
}

Available easing functions.

Requirements

1. The updates to the grid will have to come from addition or removal of a class or element. Currently, inline style updates will not trigger transitions. (Although you can manually trigger transitions in that case by calling forceGridAnimation())
2. If a grid item has children, they should be surrounded by a single container element.

Example:

<!-- grid style applied via a class -->
<ul class="some-grid-class-that-changes">
  <!-- each grid item has a single direct child -->
  <li class="grid-item">
    <div>
      <h3>Item title</h3>
      <div>Item body</div>
    </div>
  </li>
<div>

How it works

The script registers a MutationObserver that activates when the grid or one of its children adds or loses a class or element. It uses the FLIP animation technique to smoothly update the grid, applying a counter transform to the children of each item so that they do not appear distorted while the transition occurs.

It should work on container elements without CSS grid applied as well, but was developed with CSS grid in mind.