Properties

Introduction

Properties in Lottie can be animated.

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

Keyframes

Keyframe arrays MUST be stored in order of ascending t frame number.

Two consecutive keyframes MAY have the same t value but a property MUST NOT have more than two keyframes with the same t. If two keyframes share the t value, the implementation MUST render one of the two values at the given frame.

All keyframes MUST have an i and o value, unless-

• It is the last keyframe in the sequence OR
• h is present and it's 1, as the property will keep the same value until the next keyframe.

If the first keyframe occurs after the start of the animation, the initial property value will be from the first keyframe. Similarly, if the last keyframe is before the end of the animation, the last keyframe value will be held until the end.

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.

Unlike x values, y values are not clamped to [0 .. 1]. Supernormal y values allow the interpolated value to overshoot (extrapolate) beyond the specified keyframe values range.

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

Split Position

An animatable position where position values may be defined and animated separately.

Bezier Shape

Animatable Bezier.

Bezier Shape Keyframe

Color

Animatable Color.

Color Keyframe

Gradient

Animatable Gradient.

Color count is not animatable.

Gradient Keyframe