Lottie has two descriptions. The Lottie Animation Community’s specification
(version 1.0) defines a core that every player should support. The community
documentation, Lottie Docs, describes the wider format that Bodymovin writes and the
main players read. Keys marked “docs” below are from Lottie Docs, not the
specification. Numbers are JSON numbers; booleans are often written as
0 and 1.
Animation object
| Key | Type | Meaning |
|---|---|---|
nm | string | Name shown in editors. |
ver | integer | Version of the specification the file follows, written as six digits MMmmpp: 10000 is 1.0.0. |
v | string | docs: the Bodymovin version that wrote the file, such as "5.7.4". |
fr | number | Frame rate, frames per second. |
ip | number | First frame, usually 0. |
op | number | The frame at which the animation stops or loops; the length in frames when ip is 0. |
w, h | integer | Width and height. |
ddd | 0 or 1 | docs: whether the animation has 3D layers. |
layers | array | The layers, the first drawn on top. |
assets | array | Images and precompositions that layers refer to. |
markers | array | Named time ranges. |
slots | object | Values by slot ID that replace the properties carrying that sid. |
fonts | object | docs: {"list": [...]}, the fonts text layers use. |
chars | array | docs: glyphs embedded as shapes or precompositions. |
meta | object | docs: generator, author, keywords and description. |
mb | object | docs: motion blur settings. |
Assets
Every asset has id (the string layers refer to) and nm.
| Asset | Key | Type | Meaning |
|---|---|---|---|
| Image | w, h | number | Size of the image. A player keeps the picture within this box, scaled to fit with its aspect ratio kept and centred. |
| Image | u | string | Path (folder) of the image file. |
| Image | p | string | File name, or a data URL when e is 1. |
| Image | e | 0 or 1 | 1 when the image is embedded as a data URL. |
| Image | sid | string | Slot ID, so the image can be replaced. |
| Precomposition | layers | array | The layers of the nested composition. |
| Precomposition | fr | number | docs: frame rate of the precomposition. |
Markers and slots
| Object | Key | Meaning |
|---|---|---|
| Marker | cm | Comment: the marker’s name. |
| Marker | tm | Time, in frames. |
| Marker | dr | Duration, in frames. |
| Slot | p | The value given to every property whose sid matches the slot’s key. |
Animated properties
Every value that can change over time is an object:
| Key | Meaning |
|---|---|
a | 0 static, 1 animated. |
k | The value itself when static; an array of keyframes when animated. |
sid | Optional slot ID. |
ix | docs: property index used by expressions. |
x | docs: an After Effects expression, as a string. |
Keyframe
| Key | Meaning |
|---|---|
t | Frame number. Keyframes are in ascending order; at most two may share a frame. |
s | Value at this keyframe (a scalar is a one-element array). |
h | 1 to hold the value until the next keyframe, with no interpolation. |
o | Out easing handle: {"x": …, "y": …}. |
i | In easing handle of the segment towards the next keyframe. |
to, ti | Position only: spatial out and in tangents, so a moving point follows a curve. |
e | docs: end value, written by older Bodymovin versions. |
Easing is a cubic Bézier from (0, 0) to (1, 1) with control points o and
i; x is time and is clamped to 0 to 1, y is progress and may overshoot.
o (0, 0) with i (1, 1) is linear. o and
i may be left out only on the last keyframe or a hold keyframe. Before the
first keyframe the first value applies, and after the last the last value holds.
Property types
| Type | Value |
|---|---|
| Scalar | A number. |
| Vector | An array of numbers, such as a scale [100, 100]. |
| Position | A vector with spatial tangents in its keyframes. |
| Splittable position | Either a position, or {"s": true, "x": …, "y": …} with separately animated scalars. |
| Colour | An array [r, g, b] or [r, g, b, a], each from 0 to 1. |
| Hex colour | A string such as "#ff8800", used by solid layers. |
| Bézier | A path, below; keyframe values are arrays holding one path. |
| Gradient | {"p": count, "k": property}, below. |
Bézier path
| Key | Meaning |
|---|---|
c | true if the path is closed. |
v | Vertices, as [x, y] points. |
i | In tangents, one per vertex, relative to the vertex. |
o | Out tangents, one per vertex, relative to the vertex. |
The segment from vertex n to n + 1 is a cubic Bézier with control
points v[n] + o[n] and v[n+1] + i[n+1].
Gradient colours
p is the number of colour stops and cannot be animated. The value in
k is one flat array: first p groups of offset, red, green and
blue (each 0 to 1), then optionally groups of offset and alpha for the transparency
stops.
"g": { "p": 2, "k": { "a": 0, "k": [0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0] } }