Get a quote

Initiating The Documentation of the Lottie JSON Object

Published on December 4, 2023

In recent years, Lottie has gained substantial popularity, especially among developers. They’re always on the lookout for tools to manipulate and work alongside Lottie. And why wouldn’t they? Since Lottie arrived like a messiah to alleviate their woes.

Tooling in the World of Lottie

First and foremost, you need to swallow everything there is of the structure of the Lottie JSON in order to build tools around the Lottie JSON object. The structure of animation and composition within Adobe After Effects CC provides the foundations for the Lottie JSON object. The structure within Adobe After Effects CC comes along with certain necessary modifications provided by Hernan Torrisi, who’s the creator of the bodymovin plugin. As you may know, the bodymovin plugin makes the export of animations from After Effects to JSON as smooth as possible.

Issues Revolving Around Developing Lottie Tools

There are certain issues while developing Lottie tools. For instance, key-value pairs make use of abbreviations in the JSON object. As a result, reading the JSON objects becomes a heavy task. Though, a few properties in the outer layer of the object make it scarcely understandable.

The reason behind key-value pairs using abbreviations in the JSON object is quite simple, really – our need to keep the file size as small as possible. This, however, comes with a cost. It makes it terribly difficult to map which particular features of After Effects will represent which specific property in the JSON object. That too, considering our limited amount of documentation.

The second issue is quite manageable than the first. It is often seen that developers aren’t quite familiar with the terminologies of After Effects. You could ask them what “pre-composition” means and they’d give you a blank stare instead. The solution to this is simple. They need to study. All they got to do is go through After Effects documentation and dig through the myriad of articles and tutorials on the web.

The Resolution

In the realm of Lottie, enhancing tooling involves essential steps. Firstly, precise documentation of keys and values within the JSON object relating to specific After Effects properties, effects, or features is crucial. This is followed by creating a comprehensive report that simplifies these elements in easy-to-understand terms. This helps alleviate the complexity of altering key-value pairs in the JSON object to understand their impact on the animation. Moreover, it significantly reduces the need for online research on After Effects features.

The Sole Objective

The Lottie-JS library contains all the methods to chart the Lottie JSON to a more structured object model and to enable interactions with layers, shapes, or properties along with manipulating them. Our objective is to completely map the Lottie object model. Also, to include sufficient helper methods in the library in order to eliminate the complexity of the Lottie JSON. This in turn permits the entire universe of Lottie to gradually grow.

Our Current Status

An Animation class takes the role of the base class, which consists of the information provided on Lottie. Inside which there are Layer & Asset base classes and each of them has different characteristics. Every layer along with its basic properties, such as height, width, and more, can consist of more intricate properties. For instance, Anchor, Opacity, Rotation, Position, and Scale (AORPS), and all are under the category of “Property”.

The Drawbacks

The Next Destination

This sort of project is a stepping stone for efficient documentation and the creation of API methods that will enable developers to develop innovative technology that can well complement Lottie animations. As soon as the object model becomes sufficient and matured by tackling the aforementioned drawbacks, we can then proceed to abstract the subsequent step. When we abstract a step further, we can write in helper methods in order to both maneuvers and view the properties in a method that is operable for tooling. A few key pointers to get it started:

Want to develop & contribute?

If you’re serious about contributing then you’ll require Node.js version 12 or 14 to build the library. In case you’re using nodenv, skim through the nodenv docs for instructions on how to switch on Node.js versions.‌

As soon as you installed Node.js or Yarn then open Terminal and run the following code:

# Clone the repository from GitHub

git clone

# Move into the cloned repository directory

cd lottie-js

# Install dependencies using Yarn

yarn install

# Run tests (assuming there are test scripts configured)

yarn test

# Build the project

yarn build