Portfolio BLog: C5log

複数のアニメーションを連動するコード

アニメーションの終了を検知する

// アニメーション1のLottieを登録
const animation1 = lottie.loadAnimation({
  container: document.querySelector('.lottie1'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets5.lottiefiles.com/private_files/lf30_aurflyqv.json'
});

// アニメーション2のLottieを登録
const animation2 = lottie.loadAnimation({
  container: document.querySelector('.lottie2'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets8.lottiefiles.com/packages/lf20_rj4titti.json'
});

// アニメーション1が終了したら、アニメーション2を再生する
animation1.addEventListener("complete", ()=> {
  animation2.goToAndPlay(1, true);
});

// ボタンを押したらアニメーション1を再生する
const button1 = document.querySelector(".button1");
button1.addEventListener('click', ()=> {
  animation1.goToAndPlay(1, true);
});