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 |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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
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
100 | |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
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 |
|
tg |
string |
Layer XML tag name |
tag name used by the SVG renderer |
cp |
boolean |
Collapse Transform |
This is deprecated in favour of |
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 |
512 | |
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 |
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
.
0 | |
0 | |
Position 0 | |
256 | |
256 | |
Rotation 0 | |
0 | |
30 | |
Orientation 0 | |
0 | |
0 | |
Scale 0 | |
100 | |
100 | |
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 |
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. |
Position 256 | |
0 | |
0 | |
Rotation -10 | |
0 | |
0 | |
Orientation 0 | |
0 | |
0 | |
0 |
3D Parenting
As with 2D layers, you can parent 3D layers.
0 | |
0 | |
Rotation -10 | |
0 | |
0 | |
Orientation 0 | |
0 | |
0 | |
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 |
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 |