javascriptdom-eventslottiebodymovin

What is the difference between Lottie Events and Lottie EventListeners and How to use?


The documentation has both Events and EventListeners. I can get the EventListeners to fire but the Events do not have adequate documentation for me to get going. What is the difference and how do you use? Thank you.

https://github.com/airbnb/lottie-web#events

Events (Do not work, how to use?)

// From the Documentation

you can also use addEventListener with the following events:

// End Documentation

From the standard addEventListener usage, this works...

birbSequence.addEventListener('loopComplete', (e) => {
    console.log(e);
});

although 'complete' does not fire.

But to try out the stuff in Events like onEnterFrame?

var birbSequence = lottie.loadAnimation({
    container: bodyMovinContainer1,
    loop: true,
    renderer: 'svg',
    path: 'Birb Sequence 1.json',
    onEnterFrame: function(e) { console.log(e); }
});

I am really new to using Lottie though so could use some help.

Just want a way to see how to use Events


Solution

  • Let's say we have our lottie animation:

    const anim = lottie.loadAnimation({
      container: '#container',
      renderer: 'svg',
      loop: true,
      autoplay: true,
      ...
    })
    

    With Events:

    anim.onComplete = function() {
      console.log('complete')
    }
    anim.onLoopComplete = function() {
      console.log('loopComplete')
    }
    

    With addEventListener:

    anim.addEventListener('complete', function() {
      console.log('complete')
    })
    anim.addEventListener('loopComplete', function() {
      console.log('loopComplete')
    })