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:

1. Install package using npm or yarn.

npm install --save @lottiefiles/jlottie

2. 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

1. Install packages

yarn install

2. 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