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

Lottie Events vs. Lottie EventListener

Lottie Events are specific points in a Lottie animation where events occur, such as the start, end, or reaching a particular frame. Developers can trigger specific actions or functions when these events occur.

Lottie EventListener is an interface or utility designed to monitor Lottie Events. When these events are triggered, the EventListener captures them and executes the associated callback functions.

Usage Example

Suppose we have a Lottie animation, and we want to print messages when the animation starts and ends, and execute specific logic when the animation reaches 50%.

1. Introducing the Lottie Library

First, ensure that your project has included the Lottie library.

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js"></script>

2. Loading the Animation

Add a container in your HTML to host the animation.

html
<div id="lottie-animation"></div>

Use JavaScript to load the animation.

javascript
var animation = lottie.loadAnimation({
  container: document.getElementById('lottie-animation'), // Animation container
  renderer: 'svg',
  loop: false,
  autoplay: true,
  path: 'path/to/your/animation.json' // Animation file path
});

3. Adding EventListener

Use addEventListener to listen for specific events in the animation.

javascript
// Animation start event
animation.addEventListener('DOMLoaded', function() {
  console.log('Animation started!');
});

// Animation end event
animation.addEventListener('complete', function() {
  console.log('Animation ended!');
});

// Listen for animation reaching the 50th frame
animation.addEventListener('enterFrame', function(e) {
  if (e.currentTime >= (animation.totalFrames / 2)) {
    console.log('Animation has reached 50%!');
    // To execute only once, remove the listener here
    animation.removeEventListener('enterFrame');
  }
});

Conclusion

By using Lottie Events and Lottie EventListener, developers can manage interactive animation behaviors, such as executing specific actions at critical points to enhance user experience. This approach is widely applicable in web and applications, including page loading animations, progress bars, and dynamic indicators.