Properties

Introduction

Properties in Lottie can be animated.

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

In most cases, the property type can be determined by looking at the parent object. For example, a Transform's r attribute is always a Scalar Property and its s attribute is always a Vector Property.

However, having an explicit ty is useful in cases where the property is processed without its parent context. For example:

• Slots: when resolving slot values, the parser receives a property without knowing which parent object it belongs to. The ty field allows the parser to correctly interpret and validate the property value without traversing the full object hierarchy.
• Validation: tools can verify that a property's ty matches its expected type, catching mismatches early without requiring full schema traversal.

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.

Static example (a scale of [100, 100]):

{
    "a": 0,
    "k": [100, 100],
    "ty": "v"
}

Animated example (scale animating from [100, 100] to [50, 50]):

{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [100, 100],
            "o": {"x": [0.333, 0.333], "y": [0, 0]},
            "i": {"x": [0.667, 0.667], "y": [1, 1]}
        },
        {
            "t": 60,
            "s": [50, 50]
        }
    ],
    "ty": "v"
}

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.

Static example (an opacity of 100):

{
    "a": 0,
    "k": 100,
    "ty": "s"
}

Animated example (rotation from 0 to 360 degrees):

{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [0],
            "o": {"x": [0], "y": [0]},
            "i": {"x": [1], "y": [1]}
        },
        {
            "t": 60,
            "s": [360]
        }
    ],
    "ty": "s"
}

Position

Animatable 2D Vector with optional spatial tangents.

Static example (a position at [256, 256]):

{
    "a": 0,
    "k": [256, 256],
    "ty": "v2"
}

Animated example (position moving from [0, 0] to [256, 256] with spatial tangents):

{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [0, 0],
            "ti": [0, 0],
            "to": [42.667, 42.667],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [256, 256]
        }
    ],
    "ty": "v2"
}

Position Keyframe

Split Position

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

Bezier Shape

Animatable Bezier.

Static example (a triangular path):

{
    "a": 0,
    "k": {
        "c": true,
        "v": [[256, 0], [512, 512], [0, 512]],
        "i": [[0, 0], [0, 0], [0, 0]],
        "o": [[0, 0], [0, 0], [0, 0]]
    },
    "ty": "b"
}

Animated example (a triangle morphing into a different shape):

{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [{
                "c": true,
                "v": [[256, 0], [512, 512], [0, 512]],
                "i": [[0, 0], [0, 0], [0, 0]],
                "o": [[0, 0], [0, 0], [0, 0]]
            }],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [{
                "c": true,
                "v": [[256, 0], [512, 256], [0, 256]],
                "i": [[0, 0], [0, 0], [0, 0]],
                "o": [[0, 0], [0, 0], [0, 0]]
            }]
        }
    ],
    "ty": "b"
}

Bezier Shape Keyframe

Color

Animatable Color.

Static example (red):

{
    "a": 0,
    "k": [1, 0, 0],
    "ty": "c"
}

Animated example (color transitioning from red to blue):

{
    "a": 1,
    "k": [
        {
            "t": 0,
            "s": [1, 0, 0],
            "o": {"x": [0.333], "y": [0]},
            "i": {"x": [0.667], "y": [1]}
        },
        {
            "t": 60,
            "s": [0, 0, 1]
        }
    ],
    "ty": "c"
}

Color Keyframe

Gradient

Animatable Gradient.

Static example (a gradient with 3 color stops):

{
    "p": 3,
    "k": {
        "a": 0,
        "k": [0, 1, 0, 0, 0.5, 0, 1, 0, 1, 0, 0, 1]
    },
    "ty": "g"
}

Animated example (gradient transitioning between two color configurations):

{
    "p": 2,
    "k": {
        "a": 1,
        "k": [
            {
                "t": 0,
                "s": [0, 1, 0, 0, 1, 0, 0, 1],
                "o": {"x": [0.333], "y": [0]},
                "i": {"x": [0.667], "y": [1]}
            },
            {
                "t": 60,
                "s": [0, 0, 1, 0, 1, 1, 1, 0]
            }
        ]
    },
    "ty": "g"
}

Color count is not animatable.

Gradient Keyframe