Action occurs when lottie animation is finished using javascript

Design help Animations & Interactions
1

Hello,
I have added a Lottie animation to my Webflow page using the Webflow program and adding a lottie element. I want an action to occur when the animation finishes. Specifically, I want the animation to loop at different speeds. I have some javascript that works that changes the speed of the animation whenever I reload the page, so I know changing the speed of the animation through javascript is possible. I would like this action to occur when the animation finishes, rather than when the page loads.

I found some javascript code examples using the addEventListener, which looks like what I am looking for. I am using the addEventListener just to display the message ā€œAnimation Finishedā€ to show that the animation has reached an end, but it doesnā€™t work.
Just for your info, ā€œlottie_speedā€ is the id of the Lottie animation.

I am not good at javascript. Can someone point me in the right direction to come up with a solution? Thanks for any help! The script is below:

window.onload = function() {
// Below script gets a random number between 1 and 11. THIS WORKS
let speed = 20;
speed += (Math.random() - 0.5) * 1;
speed = Math.floor(Math.random() * 11) + 1
lottie_loaded_message.textContent=ā€œmessageā€;

const element = document.getElementById(ā€˜lottie_speedā€™);
const duration = element.dataset.duration;

//Sets a new random speed of lottie animation. THIS WORKS WHENEVER I RELOAD THE PAGE
lottie_speed.dataset.duration = speed;

//When animation is complete, displays message. THIS IS NOT WORKING.
element.addEventListener(ā€˜completeā€™, function() {
lottie_loaded_message.textContent=ā€œanimation completeā€;
console.log (ā€˜Animation Finished!ā€™);
});
};

Here is my public share link: LINK
(how to access public share link)

2

I had a client project that needed something similar- WF does not have any Webflow JS APIs exposed to make this simple. What I did instead was load an independent copy of the Lottie player, and then recreate the elements based on it.

This works great, you get all events and full speed control. We were doing a lottie timer animation that triggered a swiper change, but the time needed to vary per slide.

If youā€™re looking for something simpler, Iā€™d recommend you avoid using WF Lottie element and place your own elements and Lottie independently. Itā€™s less convenient in the designer but saves you the ā€œfind & replace WF Lottie elementsā€ step in your code.

3

Thanks Michael! That steered my in the right direction.
I was able to import the lotties using javascript and then use the appropriate coding to make everything work!

1 Like