Callback - Lottie Files

Question

I wan to play three different lottie files, one after each:

So I have three animations made with lottie files:

Yellow Car
Blue Car
Red Car

What I want is to play first Yellow Car animation, when it finishes play Blue Car animation, then play Red car animation and once this finishes begin all again and again.

So this is the squence: Yellow Car -> Blue Car -> Red Car -> Yellow Car ... (And repeat that sequence infinite)

Every animation lasts 3.2 seconds

But it only plays once, what is failing?

var animation1 = bodymovin.loadAnimation({
  container: document.getElementById('animation1'),
  path: 'https://assets9.lottiefiles.com/packages/lf20_kqfglvmb.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "Blue Car",
})


var animation2 = bodymovin.loadAnimation({
  container: document.getElementById('animation2'),
  path: 'https://assets6.lottiefiles.com/packages/lf20_gdzapmjf.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "Red Car",
})

var animation3 = bodymovin.loadAnimation({
  container: document.getElementById('animation3'),
  path: 'https://assets9.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "Yellow Car",
})


document.getElementById("animation1").style.display = "block";
document.getElementById("animation2").style.display = "none";
document.getElementById("animation3").style.display = "none";
//const myTimeoutBlue = setTimeout(carBlue, 2000);

var yourCallback = function(second) {
    var t = setTimeout(function() {
          document.getElementById("animation1").style.display = "block";
          document.getElementById("animation2").style.display = "none";
          document.getElementById("animation3").style.display = "none";
          animation1.play(); 
        second();
    }, 3200);
}

var yourSecondCallback = function() {
    var t = setTimeout(function() {
          document.getElementById("animation1").style.display = "none";
          document.getElementById("animation2").style.display = "block";
          document.getElementById("animation3").style.display = "none";
          animation2.play();
    }, 3200);
}

function function1(callback) {
          document.getElementById("animation1").style.display = "none";
          document.getElementById("animation2").style.display = "none";
          document.getElementById("animation3").style.display = "block";
          animation3.play(); 
    if (callback) {
        callback(yourSecondCallback);
    }

}

function1(yourCallback);

https://codepen.io/fernandocomet/pen/NWMjmqB

CaarLo · Answer

I would recommend to use lottie-web and create eventlisteners instead of infinite callback functions

dhaker · Answer

It can be done in generic way instead of using callbacks.

var animation1 = bodymovin.loadAnimation({
    container: document.getElementById('animation1'),
    path: 'https://assets9.lottiefiles.com/packages/lf20_kqfglvmb.json',
    renderer: 'svg',
    loop: true,
    autoplay: false,
    name: "Blue Car",
});

var animation2 = bodymovin.loadAnimation({
    container: document.getElementById('animation2'),
    path: 'https://assets6.lottiefiles.com/packages/lf20_gdzapmjf.json',
    renderer: 'svg',
    loop: true,
    autoplay: false,
    name: "Red Car",
});

var animation3 = bodymovin.loadAnimation({
    container: document.getElementById('animation3'),
    path: 'https://assets9.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json',
    renderer: 'svg',
    loop: true,
    autoplay: false,
    name: "Yellow Car",
});

document.getElementById("animation1").style.display = "block";
document.getElementById("animation2").style.display = "none";
document.getElementById("animation3").style.display = "none";

animation1.play();
animation2.play();
animation3.play();

var animations = ["animation1", "animation2", "animation3"];
var animationToPLay = animations[0];
var index = 1;

setInterval(() => {
    if (animationToPLay) {
        document.getElementById(animationToPLay).style.display = "none";
    }

    animationToPLay = animations[index];
    document.getElementById(animationToPLay).style.display = "block";
    index++;
    index = index === animations.length ? 0 : index;
}, 3200);

.container{
  position: relative;
  background-color: lightblue;
  width: 100%;
  height: 100%;
}

#animation1, #animation2, #animation3{
  position: absolute;
  margin: auto;
}





  
  
  
  Document

Callback - Lottie Files

2 Answers