Animate CSS Grid
Seamlessly animate all CSS grid properties, including:
grid-column
and grid-row
grid-template-columns
grid-gap
-
Fork Photo Grid Example on CodeSandbox (uses ES2015 imports)
-
Fork Photo Grid Example on Codepen (uses script tags)
This script makes it easy to transition your CSS grid 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 transition to its new configuration.
How to use it
Just call the wrapGrid
method on your grid container, and optionally provide a config object as a second argument.
If the grid is removed from the page, the animations will automatically be cleaned up as well.
ES6 Module:
yarn add animate-css-grid
or npm install animate-css-grid
import { wrapGrid } from 'animate-css-grid'
const grid = document.querySelector(".grid");
wrapGrid(grid);
Or from a script tag:
Optional config object:
Available easing functions:
'linear'
'easeIn'
/'easeOut'
/'easeInOut'
'circIn'
/'circOut'
/'circInOut'
'backIn'
/'backOut'
/'backInOut'
'anticipate'
Learn more about available easing functions here.
Two functions are returned by the wrapGrid
call that you probably won’t need to use:
import { wrapGrid } from animateCSSGrid
const grid = document.querySelector(".grid");
const { unwrapGrid, forceGridAnimation } = wrapGrid(grid);
// if you want the grid to transition after updating an inline style
// you need to call forceGridAnimation
grid.style.width = '500px'
forceGridAnimation()
// if you want to remove animations but not the grid itself
unwrapGrid()
Requirements
- 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()
) - Important If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.
Example:
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. That means there’s no need to remove the animations before removing the grid, everything should be cleaned up automatically.
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 and tested with CSS grid in mind.
Usage with Frameworks
The animate-css-grid
library can easily be used with frameworks like React or Vue.
Check out the React example or the Vue example on Codepen!