Layers

Layer

Common properties for all layers

Composition Diagram for Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer`	Type	Layer Type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time

The ty property defines the specific layer type based on the following values:

`ty`	Type
`0`	Precomposition Layer
`1`	Solid Layer
`2`	Image Layer
`3`	Null Layer
`4`	Shape Layer
`5`	Text Layer
`6`	Audio Layer
`15`	Data Layer
`13`	Camera Layer

Visual Layer

Layer used to affect visual elements

Composition Diagram for Visual Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer`	Type	Layer Type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks

Note that layers that don't have a visual component (Audio layers for example), won't have a transform and similar.

The layer is only visible between its ip and op. If they match the corresponding attributes in Animation, the layer will be visible the whole time, otherwise it will become visible at the frame ip and disappear at op.

Parenting

Within a list of layers, the ind attribute (if present) must be unique.

Layers having a parent attribute matching another layer will inherit their parent's transform (except for opacity).

Basically you need multiply the transform matrix by the parent's transform matrix to get a child layer's final transform.

The flat layer structure and flexible parenting allows more flexibility but it's different from the more traditional approach of nesting child layers inside the parent layer (like a folder structure).

One of the advantages of flexible parenting is you can have children of the same layer be intermixed with unrelated layers.

In the following example, the star and the ellipse are in separate layers, but both have the same parent, which moves left and right. Between the two there's an additional layer with the rectangle.

{lottie:parenting.json:512:512}

Auto Orient

When true, if the transform position is animated, it rotates the layer along the path the position follows.

In the following example there are two arrows animated along the same path, with no rotation when the position moves towards the right.

The transparent one keeps its rotation the same (ao is 0), while the solid one follows the path (ao is 1).

{lottie:auto_orient.json:512:512}

Mattes

A matte allows using a layer as a mask for another layer.

The way it works is the layer defining the mask has a tt attribute with the appropriate value. By defaults it affects the layer on top (the layer before it in the layer list, which has the td attribute), otherwise check the tp attribute.

In this example there's a layer with a rectangle and a star being masked by an ellipse:

Example

Enable Matte
Matte Mode

Masks

A layer can have an array of masks that clip the contents of the layer to a shape.

This is similar to mattes, but there are a few differences.

With mattes, you use a layer to define the clipping area, while with masks you use an animated bezier curve.

Example

Mode
Opacity	100
Invert
Expand	0

Lists of layers and shapes

Such lists appear Precomposition, Animation, ShapeLayer, and Groop.

In such lists, items coming first will be rendered on top

So if you have for example: [Ellipse, Rectangle]

The ellipse will show on top of the rectangle:

{lottie:layer_order.json:512:512}

This means the render order goes from the last element to the first.

Shape Layer

Renders vector data.

The only special property for this layer is shapes, an array of shapes.

Composition Diagram for Shape Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `4`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks
`shapes`	`array` of Graphic Element	Shapes	Shapes

Precomposition Layer

This layer renders a precomposition.

You can find more details in the Precompositions page.

Composition Diagram for Precomposition Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `0`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks
`refId`	`string`	Reference Id	ID of the precomp as specified in the assets
`w`	`integer`	Width	Width of the clipping rect
`h`	`integer`	Height	Height of the clipping rect
`tm`	Scalar	Time Remap	Timeline remap function (frame index -> time in seconds)

Time remapping

The tm property maps the time in seconds of the precomposition to show.

Basically you get the value of tm at the current frame, then assume that's a time in seconds since the start of the animation, and render the corresponding frame of the precomposition.

Follows an example of this, here there are two layers showing the same precomposition, the one at the top right keeps the original time while the bottom one remaps time as follows:

frame 0 (0s) maps to 0s (frame 0) in the precomp
frame 30 (0.5s) maps to 3s (frame 180) in the precomp
frame 60 (1s) maps to 1.5s (frame 90) in the precomp
frame 180 (3s) maps to 3s (frame 180) in the precomp

Basically it makes the precomp play in the first half second, then rewind to half way for the next half second, and plays back to the end for the remaining 2 seconds.

Null Layer

This layer doesn't have any special properties.

It's often used by animators as a parent to multiple other layers (see parenting).

Composition Diagram for Null Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `3`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks

Text Layer

For text data, please refer to the section about text for details.

Composition Diagram for Text Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `5`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks
`t`	Text Data	Data	Data

Image Layer

This layer renders a static image.

Composition Diagram for Image Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `2`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks
`refId`	`string`	Reference Id	ID of the image as specified in the assets

Solid Layer

This layer represents a rectangle with a single color.

Anything you can do with solid layers, you can do better with a shape layer and a rectangle shape since none of this layer's own properties can be animated.

Note that the color is represented as a string, unlike most other places.

Composition Diagram for Solid Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `1`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`ao`	0-1 `integer`	Auto Orient	If 1, the layer will rotate itself to match its animated position path
`tt`	Matte Mode	Matte Mode	Defines the track matte mode for the layer
`tp`	`integer`	Matte Parent	Index of the layer used as matte, if omitted assume the layer above the current one
`td`	0-1 `integer`	Matte Target	If set to 1, it means a layer is using this layer as a track matte
`hasMask`	`boolean`	Has Masks	Whether the layer has masks applied
`masksProperties`	`array` of Mask	Masks	Optional array of masks for the layer.
`ef`	`array` of Effect	Effects	List of layer effects
`mb`	`boolean`	Motion Blur	Whether motion blur is enabled for the layer
`sy`	`array` of Layer Style	Layer style	Styling effects for this layer
`bm`	Blend Mode	Blend Mode	Blend Mode
`cl`	`string`	CSS Class	CSS class used by the SVG renderer
`ln`	`string`	Layer XML ID	`id` attribute used by the SVG renderer
`tg`	`string`	Layer XML tag name	tag name used by the SVG renderer
`cp`	`boolean`	Collapse Transform	This is deprecated in favour of `ct`
`ct`	0-1 `integer`	Collapse Transform	Marks that transforms should be applied before masks
`sw`	`integer`	Width	Solid rectangle width
`sh`	`integer`	Height	Solid rectangle height
`sc`	Hex Color	Color	Solid fill color

Color
Width	512
Height	512

Audio Layer

This layer plays a sound.

Composition Diagram for Audio Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `6`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`au`	Audio Settings	Audio Settings	Audio Settings
`refId`	`string`	Sound Id	ID of the sound as specified in the assets

Audio Settings

Attribute	Type	Title	Description
`lv`	Vector	Level	Level

3D Layers

Layers can have 3D transforms as well:

3D layers need to have the ddd set to 1 (and so does the top-level object).

Their transform will habe a and p specified as 3D components.

Rotation will be split into 3 properties: rx, ry, rz, and you have and additional orientation property or.

X	0
Y	0
Z	Position 0
X	256
Y	256
Z	Rotation 0
X	0
Y	30
Z	Orientation 0
X	0
Y	0
Z	Scale 0
X	100
Y	100
Z	100

Camera Layer

Camera for 3D layers.

Composition Diagram for Camera Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `13`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`ks`	Transform	Transform	Layer transform
`pe`	Scalar	Perspective	Distance from the Z=0 plane. Small values yield a higher perspective effect.

Perspective	Position 256
X	0
Y	0
Z	Rotation -10
X	0
Y	0
Z	Orientation 0
X	0
Y	0
Z	0

3D Parenting

As with 2D layers, you can parent 3D layers.

X	0
Y	0
Z	Rotation -10
X	0
Y	0
Z	Orientation 0
X	0
Y	0
Z	0

Data Layer

This layer links to a data source.

Composition Diagram for Data Layer

Attribute	Type	Title	Description
`nm`	`string`	Name	Human readable name, as seen from editors and the like
`mn`	`string`	Match Name	Match name, used in expressions
`ddd`	0-1 `integer`	Threedimensional	Whether the layer is threedimensional
`hd`	`boolean`	Hidden	Whether the layer is hidden
`ty`	`integer` = `15`	Type	Layer type
`ind`	`integer`	Index	Index that can be used for parenting and referenced in expressions
`parent`	`integer`	Parent Index	Must be the `ind` property of another layer
`sr`	`number`	Time Stretch	Time Stretch
`ip`	`number`	In Point	Frame when the layer becomes visible
`op`	`number`	Out Point	Frame when the layer becomes invisible
`st`	`number`	Start Time	Start Time
`refId`	`string`	Data source Id	ID of the data source in assets

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