lottie영상 두개를 번갈아서 나오게 하는 방법이 있을까요? 채택완료

 

  

  

  

  

  

  Document

 

 

 









// JavaScript 코드

// lottie 라이브러리 가져오기

const lottie1 = lottie.loadAnimation({

  container: document.getElementById('banner-lottie'),

  renderer: 'svg',

  loop: false,

  autoplay: false,

  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',

});

const lottie2 = lottie.loadAnimation({

  container: document.getElementById('banner-lottie2'),

  renderer: 'svg',

  loop: false,

  autoplay: false,

  path: 'https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json',

});

// 첫 번째 lottie 애니메이션 실행

lottie1.play();

setInterval(() => {

  // 첫 번째 lottie 애니메이션 종료

  lottie1.stop();

  // 첫 번째 lottie 숨기고 두 번째 lottie 노출

  document.getElementById('banner-lottie').style.opacity = 0;

  document.getElementById('banner-lottie2').style.opacity = 1;

  // 두 번째 lottie 애니메이션 실행

  lottie2.play();

  // 두 번째 lottie 애니메이션 종료

  lottie2.addEventListener('complete', () => {

    // 두 번째 lottie 숨기고 첫 번째 lottie 노출

    document.getElementById('banner-lottie2').style.opacity = 0;

    document.getElementById('banner-lottie').style.opacity = 1;

    // 두 번째 lottie 애니메이션 종료

    lottie2.stop();

    // 첫 번째 lottie 애니메이션 실행

    lottie1.play();

  });

}, 5000);