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
- At present, every property type exists under an individual Property base class. Despite that, a significant number of property types co-exist along with the ones mentioned earlier (AORPS) and what’s more, is that all the objects arrive in a variety of forms based on the types.
- Every property type can be animated or keyframed, but managing timelines across different layer types requires a more sophisticated approach. Currently, this refined method hasn’t been implemented, and the keyframe class remains a distinct entity, separate from this process.
- This specific class oversees the Bézier curve, a parametric curve widely used in computer graphics and related fields. In animation, Bézier curves serve as tools to control motion. Animation applications like Adobe Flash and Synfig employ Bézier curves to define movement.
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:
- Transforming property class to a base property class with subtypes.
- Introducing property types along with all the other types while writing the classes.
- Determining a method to supervise keyframing of property types.
- Implementing this mechanism or abstraction.
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 git@github.com:LottieFiles/lottie-js.git
# 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
