Есть триггер анимации onClick, как убрать его и сделать так что бы анимация воспроизводилась при onLoad?

Question

[Виталий Герберт]

synestethica.ru/sapfir-anim
Был взят за основу один из проэктов на codrops.com, пытаюсь его переделать и не могу заставить анимацию воспроизводится просто при загрузке страницы, как понимаю что вся магия происходит где то тут...

imagesLoaded(document.body, { background: true }, () => document.body.classList.remove('loading'));
      
      const menuItems = Array.from(document.querySelectorAll('.menu > .menu__item'));
      
      const piecesObj = new Pieces(document.querySelector('.slideshow > .pieces'), {
        pieces: {rows: 22, columns: 20},
        delay: [0,60],
        hasTilt: true,
        tilt: {
          maxRotationX: -1, 
          maxRotationY: -1, 
          maxTranslationX: -5, 
          maxTranslationY: -2
        }
      });
      
      let isAnimating = false;
      let current = 0;

      const openImage = (ev, item, pos) => {
        ev.preventDefault();
        if ( isAnimating || current === pos ) {
          return false;
        }
        isAnimating = true;
        menuItems[current].classList.remove('menu__item--current');
        current = pos;
        menuItems[current].classList.add('menu__item--current');
        const imgsrc = item.dataset.image;

        piecesObj.animate({
          duration: 400,
          easing: 'easeOutQuad',
          autoplay: true,
          delay: (t,i,l) => {
            return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
          },
          translateX: (t,i) => {
            return anime.random(-500,500)+'px';
          },
          translateY: (t,i) => { 
            return anime.random(-800,-200)+'px';
          },
          rotateZ: (t,i) => { 
            return anime.random(-45,45)+'deg';
          },
          opacity: 0,
          complete: () => {
            piecesObj.setImage(imgsrc);

            piecesObj.animate({
              duration: 500,
              easing: [0.3,1,0.3,1],
              delay: (t,i,l) => {
                return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
              },
              translateX: 0,
              translateY: () => {
                return [anime.random(200,800)+'px','0px'];
              },
              rotateZ: 0,
              opacity: {
                value: 1,
                duration: 500,
                easing: 'linear'
              },
              complete: () => {
                isAnimating = false;
              }
            });
          }
        });
      };

      menuItems.forEach((item,pos) => item.addEventListener('click', (ev) => openImage(ev,item,pos)));
    }

Answer 1

[Антон Спирин]

imagesLoaded(document.body, { background: true }, () =>
  document.body.classList.remove('loading'));

const piecesObj = new Pieces(document.querySelector('.slideshow > .pieces'), {
  pieces: {rows: 22, columns: 20},
  delay: [0,60],
  hasTilt: true,
  tilt: {
    maxRotationX: -1, 
    maxRotationY: -1, 
    maxTranslationX: -5, 
    maxTranslationY: -2
  }
});

let isAnimating = false;

const openImage = () => {
  isAnimating = true;

  piecesObj.animate({
    duration: 400,
    easing: 'easeOutQuad',
    autoplay: true,
    delay: (t,i,l) => {
      return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
    },
    translateX: (t,i) => {
      return anime.random(-500,500)+'px';
    },
    translateY: (t,i) => { 
      return anime.random(-800,-200)+'px';
    },
    rotateZ: (t,i) => { 
      return anime.random(-45,45)+'deg';
    },
    opacity: 0,
    complete: () => {
      piecesObj.setImage(imgsrc);

      piecesObj.animate({
        duration: 500,
        easing: [0.3,1,0.3,1],
        delay: (t,i,l) => {
          return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
        },
        translateX: 0,
        translateY: () => {
          return [anime.random(200,800)+'px','0px'];
        },
        rotateZ: 0,
        opacity: {
          value: 1,
          duration: 500,
          easing: 'linear'
        },
        complete: () => {
          isAnimating = false;
        }
      });
    }
  });
};

document.addEventListener('DOMContentLoaded', openImage);

Comments

[Виталий Герберт]

не сработало

[Антон Спирин]

akiotwo, обновил ответ.

[Виталий Герберт]

благодарю, от души