Web Animation API V4

Create WAAPI powered animations with the simplicity of Anime.js.

Anime.js offers a even more lightweight alternative (3KB versus 10KB) to the animate() method that uses the Web Animation Element.animate() API under the hood.

WAAPI powered animations are created using the waapi.animate() method imported from the main 'animejs' module:

import { waapi } from 'animejs';

const animation = waapi.animate(targets, parameters);

Or imported as a standalone module from the 'animejs/waapi' subpath:

import { waapi } from 'animejs/waapi';

Parameters

Name	Accepts
targets	Targets
parameters	An `Object` of Animatable properties, Tween parameters, Playback settings and Animation callbacks

Returns

WAAPIAnimation

Web Animation API code example

import { waapi, stagger, splitText } from 'animejs';

const { chars } = splitText('h2', { words: false, chars: true });

waapi.animate(chars, {
  translate: `0 -2rem`,
  delay: stagger(100),
  duration: 600,
  loop: true,
  alternate: true,
  ease: 'inOut(2)',
});

<div class="large grid centered square-grid">
  <h2 class="text-xl">HELLO WAAPI</h2>
</div>

#web-animation-api .text-xl {
  font-size: 1.5rem;
  color: currentColor;
  letter-spacing: 0.06em;
}

In this section

Previous Next