finished

animation.finished is replaced by the animation.then() method. It returns a Promise that resolves and execute a callback when the animation completes.

Syntax comparison

Anime.js

The then() method can be directly inlined like this:

waapi.animate(target, {
  translate: '100px',
  duration: 500,
}).then(callback);

Or used in an async / await context:

async function waitForAnimationToComplete() {
  return animate(target, {
    translate: '100px',
    duration: 500,
  });
}

const asyncAnimation = await waitForAnimationToComplete();

WAAPI equivalent

const targets = document.querySelectorAll('.square');
const animations = [];

targets.forEach(($el, i) => {
  animations[i] = $el.animate({
    translate: '100px',
  }, {
    fill: 'forwards',
    duration: 500,
  });
});

Promise.all(
  animations
    .map((animation) => animation.finished)
    .then(() => console.log('completed'))
);

Parameters

Name	Type
callback	A Function whose first argument returns the animation itself

Returns

Promise

import { waapi, utils } from 'animejs';

const [ $value ] = utils.$('.value');

const animation = waapi.animate('.circle', {
  translate: '16rem',
  loop: 2,
  alternate: true,
});

animation.then(() => $value.textContent = 'fulfilled');

<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">promise status</span>
    <span class="value">pending</span>
  </pre>
</div>