revert() V4
Cancels the animation, reverts all its animated values to their original state, cleanup the CSS inline styles, and reverts the linked onScroll() instance if necessary.
Use revert() when you want to completely stop and destroy an animation.
Returns
The animation itself
Can be chained with other animation methods.
revert() code example
import { animate, utils, stagger } from 'animejs';
const [ $revertButton ] = utils.$('.revert');
const [ $restartButton ] = utils.$('.restart');
// Set an initial translateX value
utils.set('.square', { x: '17rem' });
const animation = animate('.square', {
x: 0,
alternate: true,
ease: 'inOutSine',
loop: true,
delay: stagger(100),
});
const revertAnimation = () => animation.revert();
const restartAnimation = () => animation.restart();
$revertButton.addEventListener('click', revertAnimation);
$restartButton.addEventListener('click', restartAnimation);<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button revert">Revert</button>
<button class="button restart">Restart</button>
</fieldset>
</div>