Adding event listener to chained Lottie animation

Hello all,

I need some help in chaining Lottie animation. I want to know when the animation chain ends and when it is on the last frame. I have an event listener in javascript that should detect this. However, I see that in the chain animation, each time the animation ends, it wipes out the event listener. Also, player.currentFrame property only accounts for the specific animation in the chain and not the entire chain itself.

What I want to happen is to have 2 chain Lottie animations. When the first one is complete, the next one appears and it is a hover animation.

I have a codepen here that demonstrates the problem I am seeing. I want the first chain animation to complete and then the second one is loaded. What happens is that the first animation in the first chain completes and then the second chain animation is loaded.

Lottie Code Pen

Hello,

I looked at your codepen and I think I found the issue. You are using the same player instance for both animations, which causes the event listener to be overwritten when you load the second animation. To fix this, you need to create a separate player instance for each animation and add the event listener to each one. You can also use the onComplete transition to trigger the next animation in the chain.

Here is a modified version of your code that works as expected:

// Create two player instances
var player1 = document.getElementById(“lottie1”);
var player2 = document.getElementById(“lottie2”);

// Load the first animation
player1.load(“https://assets10.lottiefiles.com/packages/lf20_2m1smtya.json”);

// Add the event listener to the first player
player1.addEventListener(“complete”, function () {
console.log(“First animation completed”);
// Load the second animation
player2.load
});

// Add the event listener to the second player
player2.addEventListener(“complete”, function () {
console.log(“Second animation completed”);
});

// Create the interactivity instance
LottieInteractivity.create({
player: “#lottie1”,
mode: “chain”,
actions: [
{
state: “autoplay”,
transition: “onComplete”,
frames: [0, 110],
},
],
});

// Create the interactivity instance
LottieInteractivity.create({
player: “#lottie2”,
mode: “chain”,
actions: [
{
state: “hover”,
transition: “onComplete”,
frames: [0, 170],
},
],
});

I hope this helps you with your project. Have a nice day! :blush:

Best regards,
Nicholas Smith