5

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ray Villaraza
  • 61
  • 1
  • 1
  • 7

2 Answers2

8

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')
})
trembl
  • 3,873
  • 2
  • 20
  • 14
4

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!

jawish
  • 566
  • 3
  • 5
  • 1
    Thank you - but what does the on* series of event hooks provide? I can use the addEventListeners just find but I do not understand the on* series of event hooks and would like more information on how to use them. – Ray Villaraza Aug 08 '19 at 22:36