Layers

Layer

There are several layer types, which is specified by the ty attribute:

ty Layer Type Description
0 Precomposition Renders a Precomposition
1 Solid Color Static rectangle filling the canvas with a single color
2 Image Renders an Image
3 Null (Empty) No contents, only used for parenting
4 Shape Has an array of shapes
5 Text Renders text
6 Audio Plays some audio
7 Video Placeholder
8 Image Sequence
9 Video
10 Image Placeholder
11 Guide
12 Adjustment
13 Camera 3D Camera
14 Light
15 Data

Each layer type has its own properties but there are several common properties:

Attribute Type Description
nm string

Name, as seen from editors and the like

mn string

Match name, used in expressions

ddd 0-1 integer

Whether the layer is 3D. Lottie doesn't actually support 3D stuff so this should always be 0

hd boolean

Whether the layer is hidden

ty integer

Layer type, must be one of the values seen above

ind integer

Layer index for parenting

parent integer

Parent index for parenting

sr number

Time Stretch

ip number

Frame when the layer becomes visible

op number

Frame when the layer becomes invisible

st number

Start Time

tt Matte Mode

Matte mode (see mattes)

td 0-1 integer

Matte target (see mattes)

masksProperties array of Mask

Masks for the layer

ef array of Custom Effect or Drop Shadow Effect or Fill Effect or Gaussian Blur Effect or Set Matte Effect or Pro Levels Effect or Stroke Effect or Tint Effect or Tritone Effect or Radial Wipe or Wavy Effect or Puppet Effect or Spherize Effect or Mesh Warp Effect or Displacement Map Effect or Twirl Effect

Effects for the layer

sy array of Layer Stroke or Drop Shadow or Inner Shadow or Outer Glow or Inner Glow or Bevel Emboss or Satin or Color Overlay or Gradient Overlay

Layer styles

ks Transform

Layer transform

ao 0-1 integer

If 1, The layer will rotate itself to match its animated position path

tp integer

Index of the layer used as matte, if omitted assume the layer above the current one

hasMask boolean

Whether the layer has masks applied

mb boolean

Whether motion blur is enabled for the layer

bm Blend Mode

Blend Mode

cl string

CSS class used by the SVG renderer

ln string

id attribute used by the SVG renderer

tg string

tag name used by the SVG renderer

cp boolean

This is deprecated in favour of ct

ct 0-1 integer

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.

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).

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.

Attribute Type Description
nm string

Name, as seen from editors and the like

mn string

Match name, used in expressions

inv boolean

Inverted

pt Animated Bezier

Shape

o Animated number

Opacity

mode Mask Mode

Mode

x Animated number

Expand

100
0

Shape Layer

Renders vector data.

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

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 4

Layer type

shapes Shape List

Shapes

Precomposition Layer

This layer renders a precomposition.

You can find more details in the Precompositions page.

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 0

Layer type

refId string

ID of the precomp as specified in the assets

w integer

Width of the clipping rect

h integer

Height of the clipping rect

tm Animated number

Time Remapping

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).

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 3

Layer type

Text Layer

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

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 5

Layer type

t Text Data

Data

Image Layer

This layer renders a static image.

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 2

Layer type

refId string

ID of the image as specified in the assets

Solid Color 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.

Also has the attributes from Visual Layer.

Attribute Type Description
ty integer = 1

Layer type

sc string

Color of the layer, unlike most other places, the color is a #rrggbb hex string

sh number

Height

sw number

Width

512
512

Audio Layer

This layer plays a sound.

Also has the attributes from Layer.

Attribute Type Description
ty integer = 6

Layer type

au Audio Settings

Audio Settings

refId string

ID of the sound as specified in the assets

Audio Settings

Attribute Type Description
lv Animated Vector

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.

Anchor
0
0
0
Position
256
256
0
Rotation
0
30
0
Orientation
0
0
0
Scale
100
100
100

Camera Layer

Camera for 3D layers.

Also has the attributes from Layer.

Attribute Type Description
ty integer = 13

Layer type

ks Transform

Layer transform

pe Animated number

Distance from the Z=0 plane. Small values yield a higher perspective effect.

256
Position
0
0
-10
Rotation
0
0
0
Orientation
0
0
0

3D Parenting

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

Position
0
0
-10
Rotation
0
0
0
Orientation
0
0
0

Data Layer

This layer links to a data source.

Also has the attributes from Layer.

Attribute Type Description
ty integer = 15

Layer type

refId string

ID of the data source in assets