General concepts

This page describes values and other objects used throughout the lottie format

Booleans

In some places boolean values are shown as booleans in the JSON (true/false). In other places they are shown as integers with 0 or 1 as values.

Colors

Colors are represented as arrays with values between 0 and 1 for the RGB components.

for example:

• [1, 0, 0]
• [1, 0.5, 0]

Note sometimes you might find color values with 4 components (the 4th being alpha) but most player ignore the last component.

Gradients

Gradients are represented as a flat array, showing offsets and RGB components.

There are two possible representations, with alpha, and without.

Gradients without transparency

The array is a sequence of offset, red, green, blue components for each color. all values are between 0 and 1

So let's say you want these colors:

• [0.161, 0.184, 0.459]
• [0.196, 0.314, 0.69]
• [0.769, 0.851, 0.961]

the array will look like the following:

[0, 0.161, 0.184, 0.459, 0.5, 0.196, 0.314, 0.69, 1, 0.769, 0.851, 0.961]

Gradients with transparency

Alpha is added at the end, repeating offsets and followed by alpha for each colors

So assume the same colors as before, but opacity of 80% for the first color and 100% for the other two.

The array will look like this:

[0, 0.161, 0.184, 0.459, 0.5, 0.196, 0.314, 0.69, 1, 0.769, 0.851, 0.961, 0, 0.8, 0.5, 1, 1, 1]

It's the same array as the case without transparency but with the following values added at the end:

Gradient Example

Lists of layers and shapes

Such lists appear Precomposition, Animation, ShapeLayer, and Grop.

In such lists, items coming first will be rendered on top

So if you have for example: [Ellipse, Rectangle]

The ellipse will show on top of the rectangle:

This means the render order goes from the last element to the first.

Animated Property

Animated properties have two attributes

If a is 0, then k just has the value of the property.

If a is 1, k will be an array of keyframes.

Keyframe

If h is present and it's 1, you don't need i and o, as the property will keep the same value until the next keyframe.

Easing Handles

They are objects with x and y attributes, which are numbers within 0 and 1.

For multi-dimensional animated properties, these are arrays, with one element per dimension so you can have different easing curves per dimension.

They represent a cubic bezier, starting at [0,0] and ending at [1,1] where the value determines the easing function.

The x axis represents time, a value of 0 is the time of the current keyframe, a value of 1 is the time of the next keyframe.

The y axis represents the value interpolation factor, a value of 0 represents the value at the current keyframe, a value of 1 represents the value at the next keyframe.

When you use easing you have two easing handles for the keyframe:

o is the "out" handle, and is the first one in the bezier, determines the curve as it exits the current keyframe.

i is the "in" handle, and it's the second one in the bezier, determines the curve as it enters the next keyframe.

For linear interpolation you'd have

{
    "o": {"x": [0, 0], "y": [0, 0]},
    "i": {"x": [1, 1], "y": [1, 1]}
}

For easing in and out, you move the x towards the center, this makes the animation more fluid:

{
    "o": {"x": [0.333, 0.333], "y": [0, 0]},
    "i": {"x": [0.667, 0.667], "y": [1, 1]}
}

Old Lottie Keyframes

Old lotties have an additional attribute for keyframes, e which works similarly to s but represents the value at the end of the keyframe.

They also have a final keyframe with only the t attribute and you need to determine its value based on the s value of the previous keyframe.

Easing example

In the following example, the ball moves left and right, on the background you can see a representation of its easing function.

Animated Position

Position properties have additional attributes in their keyframes to represent bezier tangents in the path followed by the animation

Transform

This represents a layer or shape transform.

It has the properties from Visual Object and its own properties are all animated:

To make the anchor point properly line up with the center of location, p and a should have the same value.

This example allows you to tweak transform attributes and see how the shape changes.

The anchor point is highlighted with an orange dot.

Split vector

Sometimes p might be split into separate components animated independently and have the following structure

Bezier

This represents a cubic bezier path.

Note that for interpolation to work correctly all bezier values in a property's keyframe must have the same number of points.

i and o are relative to v.

The nth bezier segment is defined as:

v[n], v[n]+o[n], v[n+1]+i[n+1], v[n+1]

If the bezier is closed, you need an extra segment going from the last point to the first, still following i and o appropriately.

If you want linear bezier, you can have i and o for a segment to be [0, 0]. If you want it quadratic, set them to 2/3rd of what the quadratic control point would be.

If you want a point to be smooth you need to make sure that i = -o.