Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 716
Luke Seall Avatar asked Feb 10 '17 09:02

Luke Seall


1 Answers

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');
}
like image 123
Luke Seall Avatar answered Sep 23 '22 18:09

Luke Seall