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 |
|
tg |
string |
tag name used by the SVG renderer |
cp |
boolean |
This is deprecated in favour of |
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 |
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 |