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

Stagger Value types

Since 2.0.0

Range value

Distributes values evenly between two numerical values.

Accepts

[Number|String, Number|String]

Range value code example

import { animate, stagger } from 'animejs';

animate('.square', {
  y: stagger(['2.75rem', '-2.75rem']),
  delay: stagger([0, 500]),
});
<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