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

Question

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

• onComplete
• onLoopComplete
• onEnterFrame
• onSegmentStart

you can also use addEventListener with the following events:

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready (when initial config is done)
• data_ready (when all parts of the animation have been loaded)
• data_failed (when part of the animation can not be loaded)
• loaded_images (when all image loads have either succeeded or errored)
• DOMLoaded (when elements have been added to the DOM)
• destroy

// 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

Answer 1

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')
})

Answer 2

You can use the addEventListener method to listen to all the events instead of the on* series of event hooks.

const options = {
  container: '#container',
  loop: false,
  autoplay: false,
  renderer: 'svg',
  rendererSettings: {
  scaleMode: 'noScale',
    clearCanvas: false,
    progressiveLoad: true,
    hideOnTransparent: true,
  },
};

try {
  const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });

  anim.addEventListener('complete', () => { console.log('complete'); });
  anim.addEventListener('loopComplete', () => { console.log('loopComplete'); });
  anim.addEventListener('data_ready ', () => { console.log('data_ready'); });
  anim.addEventListener('data_failed', () => { console.log('data_failed'); });
  anim.addEventListener('enterFrame', () => {
    console.log('enterFrame', anim.currentFrame);
  });
  // etc ...
} catch (error) 
  console.log('error loading anim');
}

Hope that helps!