Values

This pages describes basic types and values throughout the lottie format.

Integer Boolean

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.

Vector

Vector data is represented by an array of numbers. This is used any time a property with multiple components is needed.

An example would be a position, which would be represented as an array with two numbers, the first corresponding to the X coordinate and the second corresponding to the Y.

Color

Colors are Vectors 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 players ignore the last component.

Hex Color

Colors represented as a "#"-prefixed string, with two hexadecimal digits per RGB component.

  • #FF8000

Gradient

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.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96]

Value Description
0 Offset of the 1st color (0 means at the start)
0.161 Red component for the 1st color
0.184 Green component for the 1st color
0.459 Blue component for the 1st color
0.5 Offset of the 2nd color (0.5 means half way)
0.196 Red component for the 2nd color
0.314 Green component for the 2nd color
0.69 Blue component for the 2nd color
1 Offset of the 3rd color (1 means at the end)
0.769 Red component for the 3rd color
0.851 Green component for the 3rd color
0.961 Blue component for the 3rd color

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.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1]

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

Value Description
0 Offset of the 1st color (0 means at the start)
0.8 Alpha component for the 1st color
0.5 Offset of the 2nd color (0.5 means half way)
1 Alpha component for the 2nd color
1 Offset of the 3rd color (1 means at the end)
1 Alpha component for the 3rd color

Gradient Example

Bezier Shape

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.

Attribute Type Title Description
c boolean

Closed

Closed
i array of Vector

In Tangents

Array of points, each point is an array of coordinates. These points are along the in tangents relative to the corresponding v.
o array of Vector

Out Tangents

Array of points, each point is an array of coordinates. These points are along the out tangents relative to the corresponding v.
v array of Vector

Vertices

Array of points, each point is an array of coordinates. These points are along the bezier path

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.

Data URL

Data URLs are embedded files (such as images) as defined in [RFC2397].