Propeties

Animated Property

Properties in Lottie can be animated.

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

Attribute	Type	Description
`a`	0-1 `int`	Whether the property is animated. Note some old animations might not have this
`k`		Value or keyframes, this changes based on the value of `a`

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

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

Keyframes

Composition Diagram for Base Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current 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.

Keyframe Easing

Attribute	Type	Title	Description
`x`	Vector or `number`	X	Time component: 0 means start time of the keyframe, 1 means time of the next keyframe.
`y`	Vector or `number`	Y	Value interpolation component: 0 means start value of the keyframe, 1 means value at the next keyframe.

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.

Property types

Vector

Animatable Vector.

Composition Diagram for Vector Property

Attribute	Type	Title	Description
`sid`	`string`	Slot Id	Identifier to look up the slot
`ix`	`integer`	Property Index	Property Index
`l`	`integer`	Length	Number of components in the value arrays. If present values will be truncated or expanded to match this length when accessed from expressions.
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Vector or `array`	Value	Static Value or Array of keyframes
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Vector or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Vector Keyframe

Composition Diagram for Vector Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current keyframe
`s`	Vector	Value	Value at this keyframe.
`e`	Vector	End value	Value at the end of the keyframe, note that this is deprecated and you should use `s` from the next keyframe to get this value

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.

Composition Diagram for Scalar Property

Attribute	Type	Title	Description
`sid`	`string`	Slot Id	Identifier to look up the slot
`ix`	`integer`	Property Index	Property Index
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	`number` or `array`	Value	Static Value or Array of keyframes
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	`number` or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Position

Animatable 2D Vector with optional spatial tangents.

Composition Diagram for Position Property

Attribute	Type	Title	Description
`sid`	`string`	Slot Id	Identifier to look up the slot
`ix`	`integer`	Property Index	Property Index
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Vector or `array`	Value	Static Value or Array of keyframes
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Vector or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Position Keyframe

Composition Diagram for Position Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current keyframe
`s`	Vector	Value	Value at this keyframe.
`e`	Vector	End value	Value at the end of the keyframe, note that this is deprecated and you should use `s` from the next keyframe to get this value
`ti`	Vector	Value In Tangent	Tangent for values (eg: moving position around a curved path)
`to`	Vector	Value Out Tangent	Tangent for values (eg: moving position around a curved path)

Split Position

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

Attribute	Type	Title	Description
`s`	`boolean` = `True`	Split	Whether the position has split values
`x`	Scalar	X Position	X Position
`y`	Scalar	Y Position	Y Position

Bezier Shape

Animatable Bezier.

Attribute	Type	Title	Description
`ix`	`integer`	Property Index	Property Index
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Bezier or `array`	Value	Static Value or Array of keyframes
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Bezier or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Bezier Shape Keyframe

Composition Diagram for Shape Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current keyframe
`s`	`array` of Bezier	Value	Value at this keyframe.
`e`	`array` of Bezier	End value	Value at the end of the keyframe, note that this is deprecated and you should use `s` from the next keyframe to get this value

Color

Animatable Color.

Composition Diagram for Color Property

Attribute	Type	Title	Description
`sid`	`string`	Slot Id	Identifier to look up the slot
`ix`	`integer`	Property Index	Property Index
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Color or `array`	Value	Static Value or Array of keyframes
`a`	0-1 `integer`	Animated	Whether the property is animated
`k`	Color or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Color Keyframe

Composition Diagram for Color Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current keyframe
`s`	Color	Value	Value at this keyframe.
`e`	Color	End value	Value at the end of the keyframe, note that this is deprecated and you should use `s` from the next keyframe to get this value

Gradient

Animatable Gradient.

Attribute	Type	Title	Description
`p`	`number`	Color stop count	Color stop count
`k`	Gradient stops	Gradient stops	Gradient stops
`k.a`	0-1 `integer`	Animated	Whether the property is animated
`k.k`	Gradient or `array`	Value or Keyframes	When it's not animated, `k` will contain the value directly. When animated, `k` will be an array of keyframes.

Color count is not animatable.

Gradient Keyframe

Composition Diagram for Gradient Keyframe

Attribute	Type	Title	Description
`t`	`number`	Time	Frame number
`h`	0-1 `integer`	Hold	Hold
`i`	Keyframe Easing	In Tangent	Easing tangent going into the next keyframe
`o`	Keyframe Easing	Out Tangent	Easing tangent leaving the current keyframe
`s`	Gradient	Value	Value at this keyframe.
`e`	Gradient	End value	Value at the end of the keyframe, note that this is deprecated and you should use `s` from the next keyframe to get this value

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search