Understanding the elements and objects in the Lottie file format can help you greatly in its usage. This is exactly why we’ve created a document that we know as the human’s guide to the Lottie format - LottieDocs.

LottieDocs is an in-depth guide that provides a human-readable description of the JSON file format and how everything works within it. Here, we will walk you through some important sections available on LottieDocs, which you can use to create something cool like we have done with this #BuiltWithLottie game that’s made with a single Lottie!

Watch the video walkthrough

If you’d like to skip reading, we’ve summarized these crucial sections in a video walkthrough below.

Now, here is the list of the sections to check out and what it contains.

1. The Guide

The first section is an introduction, where we have highlighted some resources you can refer to. There is also a basic animation of a bouncy ball which is broken down in the guide.

The bouncy ball is a very simple animation - we go through a top level view of how the JSON file is structured, the structure of the layers, and the layer transform which essentially dictates the movement. It also covers the shapes which represent the graphics, as well as the fills, colors, and animation itself.

2. The Lottie Format

We go deeper into the Lottie format through general concepts of the JSON file format and how various values in it are represented, such as how boolean values, gradients, and colors appear. We also give you some interactive examples, such as how values are represented for the gradient, where you can enable or disable the alpha values to see how the representation changes the JSON itself.

If you want to go into detail on how shapes are represented, you can also view the key values, what they mean, and what they represent. Similarly, we also guide you through layer effects, enumerations, text, expressions and so on. We break down everything we know about the format with interactive examples where possible, so you can play around with it to better understand the Lottie file format.

3. Playground

One of the most useful tools is the JSON editor. You can drag and drop a Lottie JSON into the JSON editor and it will preview the JSON data for you. You can apply some Prettify functions, as well as check out tips and translations on what exactly is happening.

There are also highlights on certain objects to make it easier for you to find out what they represent. Additionally, if you change certain values on the JSON editor, the changes will be reflected in real-time, while there are also tools to preview Lottie features.

The JSON editor is particularly useful to debug any issues with your Lottie file. For example, if there are any particular values missing, it will show up on the editor and let you know what the error refers to.

4. Advanced concepts

LottieDocs also includes a complete JSON schema which you can use for Lottie JSON validation and code generation.

On top of that, you’ll find tips for rendering which is great to note if you are writing a player or you want to understand how each function gets rendered on screen. There is also a pseudo code on how to render those animations.

The section on advanced interactions is where we break down how you can use HTML, CSS, and JavaScript to interact with the Lottie animations on your page, inject expressions into them, and expand the capability of the Lottie web player. Some of the examples provided are able to interact with Doom events such as mouse hovers, where a detailed script is also shown.

We have used all these techniques to build a demonstration of this #BuiltWithLottie game which uses concepts from the advanced interaction guide to create a fully-playable port of Doom.

Learn more, create more with LottieDocs

Overall, LottieDocs aims to describe the Lottie format in its entirety, while also giving in-depth descriptions of how every aspect works - which you can’t get from just looking at a list of JSON attributes.

However, LottieDocs does not cover how to animate or export a Lottie file from your editor of choice, nor will it give you information on how to embed Lottie animation into your application or website - LottieDocs is solely to provide a description of the Lottie JSON file format itself.

So, check out LottieDocs lottiefiles.github.io/lottie-docs now and  get to know the Lottie JSON file format in greater detail!