Lottie with play control

Lottie web

Click to play or pause.

<div class="lottie play" id="divided-heart"></div>

<script type="text/javascript" src="js/other-libs/lottie.js"></script>

<script>

	var animationContainer = document.getElementById('divided-heart');

	// Init the animation
	lottie.loadAnimation({
		container: animationContainer,
		renderer : 'canvas',
		loop     : true,
		autoplay : true,
		path     : 'json/divided-heart.json'
	});


	// Add an event listener
	animationContainer.addEventListener('click', function(){

		if (this.className.indexOf('play') > -1) {
			this.classList.remove('play');
			lottie.pause();
		} else {
			this.classList.add('play');
			lottie.play();
		}

	});


</script>

svgsprite.com