jLottie is a Lotte player written in JavaScript with the goal of getting the smallest file size possible. jLottie is suitable as a general-purpose lottie player, although a subset of features are implemented in the core player – this approach results in a small footprint and great performance.
At only 9KB on gzip zip, jLottie is ideal as a lightweight add-on for any web application where not all lottie features are necessary – common use cases include emojis and small animations. A list of all the playback features that jLottie supports is here, and a test page is available here.
jLottie’s performance is achieved by compiling the Lottie source into a scene graph, which is then used to play the animation. This eliminates any need to perform real-time calculations during operation. jLottie is convenient to use when there are many animations running on a single page.
- Best Use of jLottie Launcher for Gifs and Small Animations
- jLottie player size is much smaller (less than 15KB, compressed) compared to other Lottie players
- jLottie player is convenient to use if there are many animations playing on one page
- High performance jLottie player
how to use lottie animation in html, lottie animation on scroll, lottie web, lottie web example, lottie interactivity, lottie web player
Supported Features
- Shapes (except ellipse, polyester, repeater, trim paths)
- Fills (except radial-gradient)
- Strokes (without opacity and dashes)
- Transforms
- Interpolation (except roving across time)
- Masks (limited to path, opacity, and subtract)
- Layer effects (limited to only fills)
Features not supported
- Matts
- Merge paths
- Text
- Expressions
- Images
- Precomps
- Time stretch
- Time remap
- Markers
How to make use of it:
1. Install and download jLottie with NPM.
# NPM $ npm i @lottiefiles/jLottie --save
2. Import jLottie.
// As ES Module import * as jLottie from '@lottiefiles/jLottie'; // Browser <script src="/dist/jlottie.min.js"></script>
3. Add <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. Configure Lottie Player.
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);
Minimal Lottie Animation Player In Vanilla JavaScript, jLottie Plugin/Github
See Demo And Download
Official Website(LottieFiles): Click Here
This superior jQuery/javascript plugin is developed by LottieFiles. For extra Advanced Usages, please go to the official website.
Be First to Comment