<button id="container"></button>
#container {
  position: fixed;
  width: 100px;
  height: 100px;
}
p {
  margin-left: 150px;
}
import lottieWeb from 'https://cdn.skypack.dev/lottie-web';

var container = document.getElementById('container');
var state = 'play';

var animation = lottieWeb.loadAnimation({
  container: container,
  path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/pause/pause.json',
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "Demo Animation",
});

animation.goToAndStop(14, true);

container.addEventListener('click', () => {
  if(state === 'play') {
   animation.playSegments([14, 27], true);
    state = 'pause';
  } else {
    animation.playSegments([0, 14], true);
    state = 'play';
  }
});

animation.addEventListener('DOMLoaded', () => {
  const p = document.createElement('p');
  p.textContent = 'The animation has just been loaded into the container. Thanks to the DOMLoaded event!';
  container.after(p);
});

var count = 0;

animation.addEventListener('complete', () => {
  count++;
  const p = document.createElement('p');
  let text = `You have played the animation ${count} `;
  let plural = (count === 1) ? 'time' : 'times';
  text += `${plural}. Thanks to the complete event!`
  
  p.textContent = text;
  
  if(count !== 1) {
    document.body.lastChild.textContent = text;
  } else document.body.appendChild(p);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.