Apologies in advance for my ignorance as I suspect this is a very easy question to answer, but I'm stuck.
I'm using bodymovin to play an svg animation on a website. I want to use the onComplete event to trigger a function when the animation completes, but I can't figure out how to code it.
I've tried
$("#bodymovin").on("onComplete", function(){
console.log('test completed');
});
And
document.getElementById("bodymovin").addEventListener("complete", doalert);
function doalert() {
console.log('test completed');
}
Bodymovin docs - https://github.com/bodymovin/bodymovin#events
I figured it out. Here is the entire code
var anim;
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'thelogo.json'
};
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('complete',doalert);
function doalert() {
console.log('test completed');
}