How to use events with bodymovin.js

Luke Seall picture Luke Seall · Feb 10, 2017 · Viewed 9.4k times · Source

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

Answer

Luke Seall picture Luke Seall · Feb 10, 2017

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');
}