Stagger jitter NEW

Adds a random offset to each staggered value.

Accepts

Value	Description
`<Number>`	Random offset in `[-value, +value]`
`[<Number>, <Number>]`	Offset ramps from the first value (closest target) to the second (farthest)

Default

null

Seed

Pass a seed to make jitter reproducible. The same seed also makes from: 'random' reproducible.

Value	Description
`false`	Default. Random offsets change on every run
`true`	Seeds the random generator with `0`
`<Number>`	Uses the number directly as the seed

Stagger jitter code example

import { animate, stagger } from 'animejs';

animate('.square', {
  y: ['-2.75rem', 2.75],
  duration: 500,
  delay: stagger(100, { jitter: 100 }),
  ease: 'inOutQuad',
  alternate: true,
  loop: 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