I'm using [lottie-web][1] to play some SVG animations in the browser, but I need them to play one at a time, and only move onto the next once the current animation has completed.

At present, lottie.play() plays all the animations at once, where as I want to run them once at a time, before moving onto the next loop within each().

I feel like this should be relatively simple, but struggling to make it work. I've been playing with lottie.onComplete but with no luck so far. Perhaps I need to register each animation separately?

Thanks.

HTML

<div class="step one">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>
<div class="step two">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>
<div class="step three">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>

Script

// Vars
var steps = $('.step');

// Loop through steps
steps.each( function(){
      
    // Find animation for this step
    var animation = $(this).find('.animation');
    // Convert from jQuery to vanilla js for use with lottie-web
    var anim = animation.get(0);

    // Lottie animation (vanilla js)
    var lottie = bodymovin.loadAnimation({
        container: anim,
        renderer: 'svg',
        loop: false,
        autoplay: false, // Don't autoplay, so we can play at desired time
        path: anim.getAttribute('data-json')
    });

    // Play animation
    lottie.play(); // Plays all, but should only play current animation

    // On animation complete
    lottie.onComplete = function(){

      // On complete, proceed to next .step
      console.log('complete');
    }

});