How to use events with bodymovin.js

Question

I apologize in advance for my ignorance, as I suspect that this question is very easy to answer, but I'm stuck.

I use bodymovin to play SVG animations on a website. I want to use the onComplete event to trigger a function after the animation finishes, but I cannot figure out how to code it.

I tried

$("#bodymovin").on("onComplete", function(){ console.log('test completed'); }); 

AND

  document.getElementById("bodymovin").addEventListener("complete", doalert); function doalert() { console.log('test completed'); } 

Bodemovin Docs - https://github.com/bodymovin/bodymovin#events

Answer 1

I understood. Here is the whole 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'); } 

Answer 2

 var animData = { container: document.getElementById('bodymovin'), renderer: 'svg', loop: true, autoplay: true, path: 'folder_path/data.json' }; var anim = bodymovin.loadAnimation(animData); // function for DOM Loading anim.addEventListener('DOMLoaded', function(e) { console.log('DOM loaded'); }); // function for Completion of animation anim.addEventListener('complete', test_complete); function test_complete() { console.log('test completed'); } // function for certain frame anim.addEventListener('enterFrame',enterframe); function enterframe() { console.log('In Frame'); } //function for Mouse Enter for bodymovin anim.addEventListener('DOMLoaded', function(e) { var elem = document.getElementById('bodymovin'); elem.addEventListener('mouseover', mouseElem) function mouseElem() { anim.goToAndStop(1, true); } });