Press "Enter" to skip to content

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

    Leave a Reply

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