Improvements to the Web Animation API

The waapi.animate() method adds lots of quality of life improvements and greatly improves the overall experience of using WAAPI.

On top of all the improvements to the API listed in this chapter, it is also possible to link WAAPI animations to Anime.js built-in ScrollObserver

waapi.animate('.square', {
  translate: '100px',
  autoplay: onScroll()
});

And use a Scope for easy media queries handling and component cleanup:

createScope({
  mediaQueries: { reduceMotion: '(prefers-reduced-motion)' }
})
.add(({ matches }) => {
  const { reduceMotion } = matches;
  waapi.animate('.square', {
    transform: reduceMotion ? ['100px', '100px'] : '100px',
    opacity: [0, 1],
  });
});