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.

import { waapi } from 'animejs';

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

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 } from 'animejs';

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

<h2 class="large grid centered square-grid text-xl">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>&nbsp;</span>
  <span>W</span>
  <span>A</span>
  <span>A</span>
  <span>P</span>
  <span>I</span>
</h2>

In this section

Previous Next