Lottie-web: Trigger event on anim data load

[processprocess]

I want to trigger an event once bodymovin.loadAnimation() is complete.
I'm testing this with anim.isLoaded and it's returning false unless I put a setTimeout on it.

Is it possible to fire an event once my anim data is loaded?

Thank you!

[bodymovin]

you can use events 'data_ready', 'config_ready' or 'DOMLoaded' depending at which point you need to hook to them

[processprocess]

Fantastic, this works perfectly with 'DOMLoaded'. Thank you Hernan!

[awingit]

@processprocess and @bodymovin, can you share an example of this? I am not sure how to specifically use DOMLoaded. Is the event listener added to the bodymovin object or the animation instance?

[bodymovin]

@awingit it's added to the animation instance.

[awingit]

thanks @bodymovin , would it be used like this:

var _anim = bodymovin.loadAnimation(_options); _anim.addEventListener('DOMLoaded ', function(e) { console.log('element loaded'); });

[bodymovin]

yes, exactly.

[awingit]

Is there anything in the options that would prevent that event from firing? The animation loads but that event does not trigger...

[bodymovin]

you have an trailing space: 'DOMLoaded ', if you remove it, it should work.

[awingit]

Typical :P . Thanks bodymovin! Really enjoying the project I am working on using this plugin!

[lenghart]

Hello, i have similar problem with events, idk but i cant find solution. here is my code.

`var preLoad = bodymovin.loadAnimation({
container: document.getElementById('pre-animate'),
renderer: 'svg',
loop: 1,
autoplay: true,
path: 'assets/json/pre-anime.json'
});
preLoad.addEventListener('loopComplete', function (e) {

                console.log('done');
                //$('#pre-animate').fadeOut();
                //preLoad.destroy();

            });`

I also try something like:

preLoad = bodymovin.loadAnimation({ container: document.getElementById('pre-animate'), renderer: 'svg', loop: 1, autoplay: true, path: 'assets/json/pre-anime.json', onComplete: function(){ // code here} });

also didn't work for me.

[bodymovin]

If you're setting loop to 1, it's better if you use the "complete" event instead of the "loopComplete".
If it doesn't work, can you share a link where I can check your implementation?

[lenghart]

Thanks, probably every solution worked but i have problem with json file because animation is completed but i must wait about 1min and after this my events start.

[perezpz]

@bodymovin The initial time is too long, Is there a solution to avoid it? I use react.

[bodymovin]

@OnlyBreak hi, can you explain some more?