# Introduction

# Prelude

Lottie (Bodymovin) animations are seeing increasing adoption on the web, desktop and particularly on mobile applications. The Lottie format is a lightweight JSON-based animation file format that enables designers to ship animations on any platform with a bunch of advantages over the existing formats.

LottieFiles is the largest repository of Lottie/Bodymovin files on the Internet and a hub for motion designers and developers working with Lottie format files to create, preview, test and share their animations. We are introducing “dotLottie” as a superset of the Lottie/Bodymovin JSON files to solve some of the problems encountered by our users to standardize and push the current format further.

# Background

A Lottie is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement, with support for image assets and has dynamic scripting. Lottie format files are much smaller in size compared to the alternative of using videos or animated image formats such as APNG or GIF while preserving resolution independence with the use of vector graphics.

The file format was invented and introduced by Hernan Torrisi via his Bodymovin plugin for the very popular Adobe After Effects video animation and effects software. The Bodymovin plugin uses the scripting capabilities of After Effects and its document APIs to discover and walk through the frames and assets of a composition in After Effects and transform the animation to a JSON structure. The structure of the JSON file, the nesting and attribute names closely follows the API-provided internal document structure of After Effects. It supports a major subset of the features provided and possible in After Effects including some advanced animation features such as scripting using the ExtendScript (variant of ES3) scripting provided in After Effects.

Hernan Torrisi also implemented a browser-based renderer that takes the Bodymovin plugin’s JSON and plays back the animation. The playback faithfully reproduces the intended effect from the After Effects composition while achieving resolution independence and scripting - features not available with the popular animation formats currently available. Airbnb engineers Brandon Withrow, Gabriel Peal, and Leland Richardson developed and launched Android and iOS renderers for the Bodymovin plugin’s JSON, calling their players “Lottie”.

The Bodymovin plugin’s JSON file is now usually referred to as a Lottie file.

# Why dotLottie?

Lottie already brings a number of advantages that add significant value for its use as an animation format. This includes the small file size, resolution independent high-quality rendering by mixing vector and raster assets, multi-platform support and exposing run-time changeable dynamic values for animation element properties.

Some of the features that introducing a superset of Lottie via dotLottie adds immediate value are:

# Establishing an identity

It is the tiniest of changes, but changing the file extension from .json to .lottie avoids confusion and brings a lot of ease for designers and developers dealing with Lottie animations regularly.

dotLottie also includes a manifest file, the popular way to include metadata, and a list of preview images in its archive. This enables us to easily build tools for the popular Operating Systems to identify, search and show previews of the animations.

# Archiving

Storing, distributing and consuming a Lottie with its dependent assets is challenging for designers and developers, in terms of storing them on file systems and integrating into apps and websites. Archiving animations and its assets together solves this problem as well allowing for multiple animations to be grouped together and to share assets.

dotLottie will reduce the storage costs of Lottie animations by several magnitudes. This storage efficiency will also be important for devops teams deploying Lotties with images to content delivery networks.

# Compression

Currently, a Lottie can represent image assets in a number of ways:

  • External file: Relative path to the asset stored separately as a file.
  • Inline as Data URIs: Applies Base64 encoding to the image file binary which increases the file size very significantly compared to the original file size.
  • URL: Assets can be hosted anywhere and loaded via their URL at runtime.

The use of archiving with compression allows all the assets required by an animation to be grouped together and the total file size to be dramatically reduced.This is especially effective as an alternative to inlining image assets as Data URIs. dotLottie reduces operational costs of distribution as well as bandwidth utilization.

Structure →