Minimal Lottie Animation Player In Vanilla JavaScript – jLottie

Preview:

Description:

jLottie is a tiny and fast JavaScript-powered Lottie Player that generates scalable and high-performance animation from static assets stored in a Lottie JSON file.

How to use it:

1. Install & download the jLottie with NPM.

# NPM
$ npm i @lottiefiles/jLottie --save

2. Import the jLottie.

// As ES Module
import * as jLottie from '@lottiefiles/jLottie';
// Browser
<script src="/dist/jlottie.min.js"></script>

3. Add the <lottie-player> to the page.

<lottie-player id="example">
  
</lottie-player>

4. Create a new Lottie player instance and specify the path to the Lottie JSON file.

jlottie.loadAnimation({
  container: document.getElementById('example'),
  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',
});

5. Config the Lottie Player.

• autoplay: If ‘true’, then start playing the animation upon being loaded.
• loop: If ‘true’, then the animation keeps looping.

jlottie.loadAnimation({
  container: document.getElementById('example'),
  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',
  autoplay: true,
  loop: true,
});

6. API methods.

// play the animation
jlottie.play(elementId);
// pause the animation
jlottie.pause(elementId);
// stop the animation
jlottie.stop(elementId);
// destroy the instance
jlottie.destroy(elementId);
// go to a specific frame
jlottie.goToAndStop(frame, elementId);