Bodymovin with play control

Click to Play or Pause

<div class="bodymovin play" data-bm-path="catalog/demo/divided-heart.json" data-name="divided-heart" id="divided-heart" style="width: 50%;"></div>

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

<script>
    
    var animation_container = document.getElementById('divided-heart');

    // Init
    bodymovin.loadAnimation({
        container: animation_container, 
        name: 'divided-heart',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'catalog/demo/divided-heart.json'
    });

    // Add click event
    animation_container.addEventListener('click', function(){
        var bodymovin_data = this.attributes['data-name'].value;
        if (this.className.indexOf('play') > -1) {
            this.classList.remove('play');
            if(bodymovin_data) bodymovin.pause(bodymovin_data);
        } else {
            this.classList.add('play');
            if(bodymovin_data) bodymovin.play(bodymovin_data);
        }
    });

</script>