.JSON

Introduction

Lottie is a format for vector animations, stored as JSON. It started as the output of Bodymovin, a plugin that exports animations from Adobe After Effects, and took its name from Lottie, the libraries Airbnb released in 2017 to play those files in apps and on the web.

It is widely used for small interface animations, animated icons and illustrations, because one small text file scales to any screen size. A Lottie file is ordinary JSON with the .json extension; the zipped dotLottie variant uses .lottie.

Structure

The file is one JSON object. Short keys at the top level give the format version (v), the frame rate (fr), the first and last frame (ip, op) and the width and height (w, h). A layers array holds the layers, each with a type (shape, solid, image, text, precomposition or null), its timing and its transform. An assets array holds images and precompositions that layers refer to.

Shape layers describe paths, fills, strokes, gradients and modifiers such as trim paths. Any animatable value is either a fixed value or a list of keyframes with timing and easing curves.

{
  "v": "5.7.4", "fr": 30, "ip": 0, "op": 60,
  "w": 512, "h": 512,
  "assets": [],
  "layers": [ … ]
}

Also used for

• GeoJSON .json
• Hugging Face model config (config.json) .json
• Hugging Face tokenizer (tokenizer.json) .json
• JSON Schema .json
• JavaScript Object Notation .json
• Visual Studio Code settings .json
• npm package manifest (package.json) .json

Links