Stagger from
Defines the starting position of the stagger effect.
Accepts
| Value | Description |
|---|---|
Number |
The starting index of the effect |
'first' |
Equivalent to index 0 |
'center' |
Starts the effect from the center |
'last' |
Starts the effect from the last element |
Default
0
Stagger from code example
import { createtimeline, stagger } from 'animejs';
const tl = createTimeline({
loop: true,
alternate: true,
})
.add('.row:nth-child(1) .square', {
scale: 0,
delay: stagger(50, { from: 8 }),
})
.add('.row:nth-child(2) .square', {
scale: 0,
delay: stagger(50, { from: 'first' }),
})
.add('.row:nth-child(3) .square', {
scale: 0,
delay: stagger(50, { from: 'center' }),
})
.add('.row:nth-child(4) .square', {
scale: 0,
delay: stagger(50, { from: 'last' }),
});<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>
<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>
<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>
<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>