How Lottie works under the hood

Understanding what a Lottie file contains explains why some After Effects animations export perfectly and others break.

The JSON structure

A Lottie file is JSON describing a composition: its width, height, frame rate and duration, a list of layers, and optional assets such as precomps and images. Each layer has transform properties and, for shape layers, a list of shapes such as paths, rectangles, ellipses, fills, strokes and trim paths. Animated properties store keyframes with timing and bezier easing values.

A small excerpt looks like this:

{
  "v": "5.12.1",
  "fr": 60,
  "ip": 0,
  "op": 90,
  "w": 512,
  "h": 512,
  "layers": [
    { "ty": 4, "nm": "Heart", "ks": { "s": { "a": 1, "k": [] } }, "shapes": [] }
  ]
}

fr is the frame rate, ip and op the in and out points, and ty: 4 marks a shape layer. You will rarely edit JSON by hand, but knowing the structure helps when debugging.

What players support

Players redraw the animation each frame using the data. Because each platform implements this independently, support differs slightly between them. Generally well supported:

• Shape layers with fills, strokes, gradients and trim paths
• Transforms, parenting, precomps and masks
• Track mattes, with some performance cost
• Text, with limitations around fonts

Often unsupported or unreliable:

• Most After Effects effects, such as blurs and glows
• Many expressions
• Blending modes on some platforms
• 3D layers and cameras

The LottieFiles website publishes a support table across players. Check it before you design something ambitious.

dotLottie

The dotLottie format (.lottie) is a zip archive containing one or more Lottie animations plus assets. It compresses well, can bundle several animations and themes in one file and, in newer versions, supports interactivity through state machines. The dotLottie players for the web and mobile read both formats.

Images versus vectors

Lottie can embed raster images, but doing so defeats much of the point: files grow and images do not scale cleanly. Keep artwork as vector shapes whenever possible, and use images only for small textures that truly need them.

In the Lottie section you will learn to design within these limits from the start, rather than discovering them after export.