jLottie
jLottie is a Lottie player written in javascript with an aim to have the smallest possible file size. jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance.
At only 15kb when gzipped, jLottie is perfect as a lightweight addition to any webapp where not all of the lottie featues are necessary - common use cases include animated icons and micro animations. A list of all of the playback features supported by jLottie is available here, and there's a test page available here.
jLottie's performance is achieved by compiling the Lottie source into a scene graph, which is subsequently used to play the animation. This forgoes any need to perform real-time computations during playback. jLottie is suitable for use when there are many animations playing on a single page.
- jLottie player is best used for animated icons and micro animations
- jLottie player is vastly smaller in size (at 15kb when gzipped) compared to other Lottie players
- jLottie player is suitable for use if there are many animations playing on a single page
- jLottie player is highly performant
Performance
Below are results of some performance tests comparing jLottie with lottie-player.
Single animation
In this test 11 Lottie animations were selected from the Lottiefiles public animations repository, and their runtime performance and memory utilization was recorded using Chrome's analysis tools. The performance figures were prorated to 1 second durations, which allows for direct comparison, as per the table below.
All figures other than memory is in milliseconds.
Scripting | Rendering | Painting | System | Idle | Memory (MB) | ||
---|---|---|---|---|---|---|---|
Best | jLottie | 41 | 11 | 5 | 14 | 928 | 1.9 |
lottie-player | 122 | 28 | 10 | 37 | 801 | 4 | |
Average | jLottie | 70 | 29 | 8 | 23 | 872 | 3.4 |
lottie-player | 91 | 36 | 11 | 31 | 831 | 6.2 | |
Worst | jLottie | 124 | 35 | 11 | 24 | 805 | 8 |
lottie-player | 84 | 41 | 9 | 25 | 840 | 4.7 |
Stress test
In this test, a total of 35 Lottie animations, whose features are fully supported by jLottie, were chosen at random from the Lottiefiles public animations repository. These animations were then rendered in one page at the same time, and performance and memory utilization analyzed using Chrome tools.
The test pages used for this test are here for jLottie and here for lottie-player.
During this test, it was discovered that all 35 animations noticeably skipped frames when lottie-player was rendering them. Conversely, jLottie is designed not to skip any frames, and therefore no jitter could be discerned on any of the animations even during the Chrome performance analysis.
All figures other than memory is in milliseconds.
Scripting | Rendering | Painting | System | Idle | Memory (MB) | |
---|---|---|---|---|---|---|
jLottie | 515 | 269 | 36 | 62 | 115 | 73.7 |
lottie-player | 564 | 205 | 19 | 45 | 166 | 183 |
Features
Supported features
- Shapes (except, ellipse, polystar, 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
Installation
In HTML:
- Import from CDN.
<script src="https://unpkg.com/@lottiefiles/jlottie@latest/dist/jlottie.min.js" type="module"></script>
In Javascript or TypeScript:
- Install package using npm or yarn.
npm install --save @lottiefiles/jlottie
- Import package in your code.
import * as jlottie from '@lottiefiles/jlottie';
OR
const jlottie = require('@lottiefiles/jlottie');
Usage
<div id="my-animation"></div>
To load an animation from a URL:
jlottie.loadAnimation({
container: document.getElementById('my-animation'),
loop: true,
autoplay: true,
useWebWorker: false,
path: '<LOTTIE_URL>',
});
To directly pass animation data:
jlottie.loadAnimation({
container: document.getElementById('my-animation'),
loop: true,
autoplay: true,
useWebWorker: false,
animationData: animationDataVariable,
});
To enable debugging (debug outputs console logs and debugAnimation outputs exception messages to the debugContainer):
jlottie.loadAnimation({
container: document.getElementById('my-animation'),
loop: true,
autoplay: true,
debug: true,
debugAnimation: true,
debugContainer: document.getElementById('debug-div'),
useWebWorker: false,
path: '<LOTTIE_URL>',
});
In all three cases above, simply set useWebWorker to true to enable rendering using web workers.
API
Methods
jlottie.loadAnimation(configObject)
Takes in an object with format as follows as parameter
{
container: document.getElementById('my-animation'), // html dom element to hook animation to
loop: true, // loop toggle
autoplay: true, // autoplay
path: '<LOTTIE_URL>', // path to hosted lottie file
}
Returns
Type: Object, that refers to the created animation with the following properties:
thisAnimation._currentFrame; // the current frame number thisAnimation is on
thisAnimation._totalFrames; // the total number of frames in thisAnimation
jlottie.pause(elementId)
Pause animation. Takes in the Dom element Id as parameter.
Alternative : thisAnimation.pause()
Returns
Type: Null
jlottie.play(elementId)
Play animation. Takes in the Dom element Id as parameter.
Alternative : thisAnimation.play()
Returns
Type: Null
jlottie.stop(elementId)
Stop animation. Takes in the Dom element Id as parameter.
Alternative : thisAnimation.stop()
Returns
Type: Null
jlottie.destroy(elementId)
Destroy animation. Takes in the Dom element Id as parameter.
Alternative : thisAnimation.destroy()
Returns
Type: Null
jlottie.goToAndStop(frame, elementId)
Go to specified frame and stop. Takes in a frame number and Dom element Id as parameter.
Alternative : thisAnimation.goToAndStop(frame)
Returns
Type: Null
Events dispatched
loopComplete
Fires at the end of each loop.
detail = {
count: num1, // number of loops thus far
frame: num2, // the current frame number
animation: num3 // internal index number of this animation
}
hovered
Fires when pointer enters the bounding box of the animation.
detail = {
animation: num1 // internal index number of this animation
}
DOMLoaded
Fires right after all DOM content is loaded.
detail = {
animation: num1 // internal index number of this animation
}
loadError
Fires if an error is encountered whilst loading the animation.
detail = {
error: {} // the error object thrown
animation: num1 // internal index number of this animation
}
Go to specified frame and stop. Takes in a frame number and Dom element Id as parameter.
Development
Building
1. Install dependencies.
yarn install
2. Dev mode.
yarn dev
Automatically build and preview while developing. This runs rollup
in watch mode and spins up a server at port 10000
to preview and test the builds.
3. Production builds.
yarn build
This creates ESM, CJS and UMD builds in the dist
directory.
Testing
- Install packages
yarn install
- Run test command.
yarn test
This will generate snapshots in the __snapshots__
directory and warn of mismatches with lottie-web
renderer as the
comparison baseline.
Contributing
See how to contribute to this project.
FAQ
-
Why doesnt my Lottie animation work on the jLottie player?
-
The jLottie player does not support as many Adobe After Effects features as other players, as it was built to be smaller in size and highly performant. It therefore may not support certain settings, effects or features that were used when creating the animation. Please send us feedback and by popular demand we may make accomdations as needed. You can submit your feed back here. Click here
-
What features/effects of After Effects does this player support?
-
Features supported by jLottie are listed here.
-
Where can I raise issues?
-
Please use github issues to highlight any bugs.
-
Where can I drop feedback?
-
You may Click here and submit your feedback
License
MIT License © LottieFiles.com