Properties

Introduction

Properties in Lottie can be animated.

Their structure depends on whether it's animated or not:

Keyframes

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.

Keyframe Easing

Keyframe easing handles are objects with x and y attributes, which are numbers within 0 and 1.

For vector 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]}
}

Easing example

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

Property types

Vector

Animatable Vector.

Vector Keyframe

Scalar

Animatable scalar (single number value).

Note that when animated it uses Vector Keyframes, so instead of scalars keyframes have arrays with a single values.

Position

Animatable 2D Vector with optional spatial tangents.

Position Keyframe

Bezier Shape

Animatable Bezier.

Bezier Shape Keyframe

Color

Animatable Color.

Color Keyframe