<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);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.