Estoy usando [lottie-web][1] para reproducir algunas animaciones SVG en el navegador, pero necesito que se reproduzcan una a la vez, y solo pasar a la siguiente una vez que se haya completado la animación actual.

En la actualidad, lottie.play() reproduce todas las animaciones a la vez, mientras que quiero ejecutarlas de una en una, antes de pasar al siguiente ciclo dentro de each() .

Siento que esto debería ser relativamente simple, pero luchar para que funcione. He estado jugando con lottie.onComplete pero sin suerte hasta ahora. ¿Quizás necesito registrar cada animación por separado?

Gracias.

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>

Guion

 // 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'); } });