Layers

Layer

Common properties for all layers

Composition Diagram for Layer Layer Visual Object Camera Layer Audio Layer Visual Layer Null Layer Shape Layer Image Layer Text Layer Solid Layer Precomposition Layer 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

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 Visual Layer Layer Visual Object Null Layer Shape Layer Image Layer Text Layer Solid Layer 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

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:

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.

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 Shape Layer Visual Layer Layer Visual Object
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 Precomposition Layer Visual Layer Layer Visual Object
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 Null Layer Visual Layer Layer Visual Object
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 Text Layer Visual Layer Layer Visual Object
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 Image Layer Visual Layer Layer Visual Object
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 Solid Layer Visual Layer Layer Visual Object
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

Audio Layer

This layer plays a sound.

Composition Diagram for Audio Layer Audio Layer Layer Visual Object
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.

Camera Layer

Camera for 3D layers.

Composition Diagram for Camera Layer Camera Layer Layer Visual Object
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.

3D Parenting

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

Data Layer

This layer links to a data source.

Composition Diagram for Data Layer Data Layer Layer Visual Object
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