Lottie-web: Animation runs only once

Created on 12 Nov 2017 · 7Comments · Source: airbnb/lottie-web

My intention is to make the animation run once, every time you click on a link.
I did this with the code below.

_call animation_
<a id="mylostpass" class="log01-link" title="I am lost my pass" href="#log01">I am lost my pass</a>

_animation_
<div style="width:60%; margin: auto;" class="bodymovin" data-bm-path="site/PASSWORD.json" data-bm-renderer="svg" data-bm-loop="false" data-bm-autoplay="false" data-name="lostpass"></div>

_Script_
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#mylostpass').click(function(){ bodymovin.play('lostpass'); }); }); </script>

However, by clicking a second time on the link, show the animation stopped and does not restart nor play it again.
Any suggestion?

Source

Cloudchoice

Most helpful comment

A couple things:

jQuery(document).ready is not the same as waiting for the animation to load using the method provided in Bodymovin. For example: anim.addEventListener('DOMLoaded', function(){anim.goToAndPlay(1,true)}). This is important.
Try using goToAndPlay instead of play

Jeremy-Knudsen on 17 Nov 2017

🎉3 ❤2

All 7 comments

A couple things:

jQuery(document).ready is not the same as waiting for the animation to load using the method provided in Bodymovin. For example: anim.addEventListener('DOMLoaded', function(){anim.goToAndPlay(1,true)}). This is important.
Try using goToAndPlay instead of play

Jeremy-Knudsen on 17 Nov 2017

🎉3 ❤2

Hi,
I'm having a similar issue where each animation only plays once and I've tried using DOMLoaded and goToAndPlay() without any luck. I have a few animations inside a carousel. When a user clicks the next button it should start playing the animation inside the active carousel. What am I missing here?

I also notice that the property isPaused is set to true the second time I try to get it to play. How do I control it?

<div class="carousel-animate lottie" id="ir_home" data-path="/assets/bodymovin/IR_animation_02.json" data-name="ir_home"></div>

$("#" + info +"_infographic .right.carousel-control").on('click',function(e) {
    var nextVid = $(this).parents('.active').next().find('.carousel-animate');

    if (nextVid[0] !== undefined) {
        var id = document.getElementById(nextVid[0].id);
        var data = id.dataset.path;
        var animNext = lottie.loadAnimation({
            container: id,
            render: 'svg',
            loop: false,
            autoplay: false,
            path: data
        });

        animNext.addEventListener('DOMLoaded',function(){
            animNext.goToAndPlay(0);
        });
    }
});