Stagger total V4

Defines a custom staggering length instead of using the actual total length of the staggered targets.
This is useful if the max value of the custom order defined using the use parameter is lower than the actual number of staggered targets when using the from, reversed or ease parameters.

Accepts

Number

Default

null

Stagger total code example

import { animate, stagger } from 'animejs';

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

<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="0"></div>
  <div class="padded label">data-index="0"</div>
</div>
<div class="small row">
  <div class="square" data-index="1"></div>
  <div class="padded label">data-index="1"</div>
</div>
<div class="small row">
  <div class="square" data-index="1"></div>
  <div class="padded label">data-index="1"</div>
</div>

Previous Next