Animate-CSS-Grid

Easy transitions for CSS Grid

Animate CSS Grid

Seamlessly animate all CSS grid properties, including:

grid-column and grid-row

grid-column and grid-row

grid-template-columns

grid-template-columns

grid-gap

grid-gap

Fork Photo Grid Example on Codepen

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 animateCSSGrid

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

Or from a script tag:

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

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

Optional config object:

{
  // int: default is 0 ms
  stagger: 100,
  // int: default is 250 ms
  duration: 500
  // string: default is 'easeInOut'
  easing: 'backInOut'
}

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()

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

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.

shares