Author: | LottieFiles |
---|---|
Views Total: | 980 views |
Official Page: | Go to website |
Last Update: | September 18, 2021 |
License: | MIT |
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);