Multi-targets animation

Targets one or multiple DOM Elements using a CSS selector, allowing animating multiple targets in one single animate() call and support of the stagger() method.

Syntax comparison

Anime.js

waapi.animate('.circle', {
  translate: '100px',
  delay: stagger(100),
});

WAAPI equivalent

document.querySelectorAll('.circle').forEach(($el, i) => {
  $el.animate({
    translate: '100px',
  }, {
    duration: 1000,
    delay: i * 100,
    easing: 'ease-out',
  }).finished.then(() => {
    $el.style.translate = '100px';
  })
});

Accepts

Any String accepted by document.querySelectorAll()