Stagger use V4

Defines a custom staggering order instead of using the natural targets order by using an attribute or property of the targets.
The properties or attributes must contain a suite of number, starting at 0.

A custom total parameter value must be defined if the highest custom index is lower than the actual total length of staggered targets when also using the from, reversed or ease parameters.

Accepts

String of a valid property or attribute name

Default

null

Stagger use code example

import { animate, stagger } from 'animejs';

animate('.square', {
  x: '17rem',
  rotate: 90,
  delay: stagger(250, { use: 'data-index' }),
});

<div class="small row">
  <div class="square" data-index="2"></div>
  <div class="padded label">data-index="2"</div>
</div>
<div class="small row">
  <div class="square" data-index="0"></div>
  <div class="padded label">data-index="0"</div>
</div>
<div class="small row">
  <div class="square" data-index="3"></div>
  <div class="padded label">data-index="3"</div>
</div>
<div class="small row">
  <div class="square" data-index="1"></div>
  <div class="padded label">data-index="1"</div>
</div>

Previous Next