anime.js logo v4 Anime.js | JavaScript Animation Engine

Stagger Parameters

Since 2.0.0

Stagger ease

Defines an easing applied to the staggered values distribution.

Accept

ease

Default

'linear'

Stagger ease code example

import { animate, stagger } from 'animejs';

animate('.square', {
  y: stagger(['2.75rem', '-2.75rem'], { ease: 'inOut(3)' }),
  delay: stagger(100, { ease: 'inOut(3)' }),
});
<div class="small justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
Previous Next