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 is 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

Must Read: An HTML5 Audio Player MP3 / OGG jQuery Plugin | mb.miniAudioPlayer

Supported Features

• Shapes (except ellipse, polyester, repeater, and 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);

All figures other than memory are in milliseconds.

API

Methods

jlottie.loadAnimation(configObject)

Takes in an object with the format as follows as a parameter.

Returns

Type: Object, refers to the created animation with the following properties.

jlottie.pause(elementId)

Pause animation. Takes in the Dom element Id as a parameter.

Alternative : thisAnimation.pause()

Returns

Type: Null

jlottie.play(elementId)

Play animation. Takes in the Dom element Id as a parameter.

Alternative : thisAnimation.play()

Returns

Type: Null

jlottie.stop(elementId)

Stop animation. Takes in the Dom element Id as a parameter.

Alternative : thisAnimation.stop()

Returns

Type: Null

jlottie.destroy(elementId)

Destroy animation. Takes in the Dom element Id as a parameter.

Alternative : thisAnimation.destroy()

Returns

Type: Null

jlottie.goToAndStop(frame, elementId)

Go to the specified frame and stop. Takes in a frame number and Dom element Id as a parameter.

Alternative : thisAnimation.goToAndStop(frame)

Returns

Type: Null

Events dispatched

loopComplete

Fires at the end of each loop.

hovered

Fires when the pointer enters the bounding box of the animation.

DOMLoaded

Fires right after all DOM content is loaded.

loadError

Fires if an error is encountered whilst loading the animation.

See Demo And Download

Official Website(LottieFiles): Click Here

This superior jQuery/javascript plugin is developed by LottieFiles. For extra Advanced Usage, please go to the official website.