複数のアニメーションを連動するコード
アニメーションの終了を検知する
// アニメーション1のLottieを登録
const animation1 = lottie.loadAnimation({
container: document.querySelector('.lottie1'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/assets/lottie/rocket.json'
});
// アニメーション2のLottieを登録
const animation2 = lottie.loadAnimation({
container: document.querySelector('.lottie2'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/assets/lottie/rocket2.json'
});
// アニメーション1が終了したら、アニメーション2を再生する
animation1.addEventListener("complete", ()=> {
animation2.goToAndPlay(1, true);
});
// ボタンを押したらアニメーション1を再生する
const button1 = document.querySelector(".button1");
button1.addEventListener('click', ()=> {
animation1.goToAndPlay(1, true);
});