How to run a new Lottie animation when playing one is completed using the adEventListener method with the complete event.

To run a new Lottie animation when playing one is completed using the addEventListener method with the "complete" the event, you can follow these steps:

1. First, create a Lottie animation using the lottie.loadAnimation() method and assign it to a variable. For example:

const animation1 = lottie.loadAnimation({
container: document.getElementById(‘animation1’),
renderer: ‘svg’,
loop: false,
autoplay: false,
path: ‘animation1.json’
});

Here, we’ve created a Lottie animation with the ID animation1 that’s set to not loop (loop: false) and not autoplay (autoplay: false) when loaded.

2. Next, add an event listener to the animation for the "complete" event. For example:

animation1.addEventListener(‘complete’, function() {
// Code to run when animation1 completes
});

Here, we’re using an anonymous function as the event listener. When the "complete" event is fired by the animation1 animation, this function will run.

3. Inside the event listener function, create a new Lottie animation using the lottie.loadAnimation() method and assign it to a variable. For example:
   

const animation2 = lottie.loadAnimation({
container: document.getElementById(‘animation2’),
renderer: ‘svg’,
loop: false,
autoplay: true,
path: ‘animation2.json’
});

Here, we’ve created a new Lottie animation with the ID animation2 that’s set to not loop (loop: false) and autoplay (autoplay: true) when loaded.

4. Finally, you can use the play() method to start the new animation when the "complete" event is fired. For example:
   

animation1.addEventListener(‘complete’, function() {
const animation2 = lottie.loadAnimation({
container: document.getElementById(‘animation2’),
renderer: ‘svg’,
loop: false,
autoplay: true,
path: ‘animation2.json’
});
animation2.play();
});

Here, we’ve created the animation2 the animation inside the event listener function, and then used the play() method to start it playing.

Now, when the animation1 animation completes, the event listener will fire, creating and starting the animation2 animation.