Back to Anime

Auto layout / Code / anime.js

examples/auto-layout/code/index.html

4.4.1398 B
Original Source
/* WAAPI */

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

waapi.animate('.circle', {
  translate: '100px',
  duration: 1000,
  delay: stagger(100),
  ease: 'ease-out',
});