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

Utilities 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([0, 500], { ease: 'inOut(3)', from: 'center' }),
  ease: 'inOutQuad',
  duration: 500,
  loop: true,
  alternate: true,
});
<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