Search code examples
javascriptdom-eventsbodymovin

How to use events with bodymovin.js


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


Solution

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