Getting Started

An object model for representing the Lottie JSON structure. This is designed to help with serializing and deserializing a Lottie JSON into an object model for validation and ease of value access.

What is Lottie-Js?

This library was created to make interacting with the Lottie JSON object simpler. The library consists of methods to map the Lottie JSON to the object model and interact with properties as well as manipulate them. The goal is to fully map the Lottie object model and add in enough helper methods to the library such that Lottie manipulation can be made easier without having to learn the entire complex structure of a Lottie file.

Basic structure

The classes folder consists of methods, variables, and typings for all the classes exported from this repository.

pageAnimation

The animation class is the root class and this is the class where all the helper methods exist. To map a Lottie to this object model as created in this repository, use the methods provided in this class. [click here] to see the methods and variables for the Animation object.

pageAnimation

The metaclass is the part of the JSON object that assigns the Lottie with information such as the author and description and other metadata as mentioned in the class document.

pageMeta

A Lottie consists of multiple layers, layers of different types as well as multiple assets and these assets too can be of different types. Layers contain multiple shape types and these shapes themselves can have more shapes inside of them. The properties, methods and constructors of each of these classes are highlighted in the following pages.

pageAssetpageLayerpageShape

Enums are documented as certain properties require specific variables as inputs. Method parameters will be type-checked against the enums so that only the correct values can be passed in so as not to cause any issues.

pageShapeType

Usage

Install

yarn add @lottiefiles/lottie-js

Use

import { Lottie } from '@lottiefiles/lottie-js';

import { Lottie } from '@lottiefiles/lottie-js';

async function loadAnimation() {
  // Create Lottie instance 
  // (you can also use Animation.fromJSON method if you already have the Lottie JSON loaded)
  const anim = Animation.fromURL('https://assets1.lottiefiles.com/packages/lf20_u4j3xm6r.json');

  // Print some data of the animation
  console.log('Frame Rate', anim.frameRate);
  console.log('Number of Layers', anim.layers.length);
  console.log(anim.getColors());

  // Manipulate animation
  anim.name = 'Woohoo';
  anim.width = 512;
  anim.height = 512;

  // Get the new JSON
  const woohooLottie = JSON.stringify(anim);
  console.log(woohooLottie);
}

Promise.resolve(loadAnimation);

Documentation

The documenting system used is TypeDoc.

Clone the repo and run the yarn command: yarn docs to generate the docs to browse locally.

The generated documentation is placed in the docs/ folder.

Testing

The testing system used is Jest and each file should have an accompanying test suite for functional and integration tests.

Running test suite

yarn test

Building

yarn build