direction
The direction
parameter is replaced by two separate parameters: reversed
and alternate
.
direction |
reversed |
alternate |
Effect |
---|---|---|---|
'forward' |
false |
false |
Play forward |
'reverse' |
true |
false |
Play backward |
'alternate' |
false |
true |
Alternate on loop |
'alternate-reverse' |
true |
true |
Start in reverse and alternate on loop |
Syntax comparison
Anime.js
waapi.animate('.square', {
x: 100,
reversed: true,
alternate: true,
loop: 3
});
WAAPI equivalent
const targets = document.querySelectorAll('.square');
targets.forEach(($el, i) => {
$el.animate({
translate: '100px',
}, {
fill: 'forwards',
duration: 1000,
direction: 'alternate-reverse',
iterations: 4
})
});
Accepts
Boolean
direction code example
import { waapi, stagger } from 'animejs';
waapi.animate('.square', {
translate: '17rem',
reversed: true,
delay: stagger(100)
});
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>