How to use events with bodymovin.js
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');
}
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);
}
});