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

Stagger

Since 2.0.0

Values staggering

All tweens animatable properties accept function-based values, enabling the use of the stagger function returned by the stagger() method in multi-target animations.

This results in each target having a staggered value, increasing by a set number for each subsequent target.

Values staggering code example

import { animate, stagger } from 'animejs';

const animation = animate('.square', {
  y: stagger(['-2.75rem', '2.75rem']),
  rotate: { from: stagger('-.125turn') },
  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