A Small-Footprint Lottie Animation Player In Vanilla JavaScript | jLottie

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

4. Create a new Lottie player instance and specify the path to the Lottie JSON file.

  container: document.getElementById('example'),
  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',

5. Configure Lottie Player.

  container: document.getElementById('example'),
  path: 'https://assets9.lottiefiles.com/packages/lf20_PBgNop.json',
  autoplay: true,
  loop: true,

6. API methods.

// play the animation

// pause the animation

// stop the animation

// destroy the instance

// go to a specific frame
jlottie.goToAndStop(frame, elementId);

All figures other than memory are in milliseconds.

ScriptingRenderingPaintingSystemIdleMemory (MB)




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


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


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

Alternative : thisAnimation.pause()


Type: Null


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

Alternative : thisAnimation.play()


Type: Null


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

Alternative : thisAnimation.stop()


Type: Null


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

Alternative : thisAnimation.destroy()


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)


Type: Null

Events dispatched


Fires at the end of each loop.


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


Fires right after all DOM content is loaded.


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.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…

Leave a Reply

Your email address will not be published. Required fields are marked *