Animate-css-grid

animate-css-gird

Easy transitions for CSS Grid.

FLIP animation applied on CSS grids with the help of MutationObserver that activates when the grid or one of its children adds or loses a class or element.

Get it: npm install animate-css-grid

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13

import { wrapGrid } from animateCSSGrid

const grid = document.querySelector(".grid");
const config = {
  // int: default is 0 ms
  stagger: 100,
  // int: default is 250 ms
  duration: 500
  // string: default is 'easeInOut'
  easing: 'backInOut'
};

wrapGrid(grid, config);

1
2
3
4
5
6
7
8
9
10

<!-- 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>

Check out the DEMO!

GIF FTW!

animate-css-grid

Suggest a module

Comments