Referencing Layers and Compositions
In previous article you've learnt how to create and use variables in your expressions. This let you reference pieces of data in your expression using a variable name, for example:
const myVar = "Hello";
Often you need that value to come from a property on a different layer, rather than typing it into the expression directly. This allows you to 'link' layers together, one of the main uses for expressions.
const myVar = "some value on another layer?";
In this article you'll learn how to access properties on other layers in expressions, as well as layers in other compositions.
Using the Pick Whip
One way to add a reference to a property on another layer is by using the pick whip.
This will let you select a property to reference using the After Effects interface, adding code to your expression that references the property.
The pick whip is a visual way of adding references to other properties in an expression.
In the above example we've used the pick whip to 'link' the opacity of two text layers by:
- Adding an expression to the opacity of 'Text Layer 1'
- Dragging from the pick whip icon (the swirl) to the property we wish to reference.
After Effects then inserted the following code into the expression on
'Text Layer 1':
thisComp.layer("Text Layer 2").transform.opacity;
If you then change the Opacity of
'Text Layer 1' you can see the Opacity of
'Text Layer 2' update to match.
In the rest of this article, you'll learn how this expression works as well as how to write it yourself.
The After Effects Project Tree
Every After Effects project follows the same basic structure:
- A project file (
- Containing compositions
- With layers inside those compositions.
You can think of this structure as a tree diagram, where the project is the 'root' of the tree, containing 'child' compositions, and each composition containing 'child' layers in the same way.
An After Effects project can be thought of as a tree of compositions and their layers.
This parent-child relationship of compositions and layers is fundamental to how you use expressions to reference them.
Before you can reference a layer in an expression, you must tell After Effects which composition to look for that layer in.
Like any other piece of data (such as a number or string) you can store a reference to a comp in a variable. For example, to store a reference to the
'Lower Third' composition in the diagram above you would write:
const lowerThirdComp = comp("Lower Third");
This line of code tells After Effects to find the composition named
'Lower Third', and gives you back a reference to this composition (displayed as
[Object Comp] on a text layer).
comp() is one of the functions built into After Effects. You'll learn more about functions, including others built into After Effects, in a future article.
Each composition has built in properties, such as
name, which returns the name of the composition. We can use this to make sure we've selected the correct composition in our project.
const lowerThirdComp = comp("Lower Third");lowerThirdComp.name;
Accessing the Current Composition
After Effects also provides a variable that is always equal to the current composition (the composition the expression is in).
const currentComp = thisComp;
thisComp will always reference the composition the expression is in.
For example, the expression:
Will always return the name of the current composition.
Now you know how to reference a composition in an expression, you can use that composition object to select a specific layer.
Since layers are contained within compositions, you must begin by referencing the composition and then the layer. For example:
const lowerThirdComp = comp("Lower Third");const nameLayer = lowerThirdComp.layer("Name");
In the same way that
comp() is a built in function for referencing compositions,
layer() is a built in function for referencing layers.
comp() function which returns
[object Comp] by default, the
layer() function returns the layers name by default.
Layer Name or Index
In the above example, we've selected the layer by its name,
"Name". In some cases you may not know the name of a layer, or you may want to reference it by it's position in the layer order rather than it's name. For example, referencing the layer below the layer the expression is on.
You can do this by using the layer index in the expression rather than the layer name. For example:
const layerTwo = thisComp.layer(2);
Will select the second layer in the composition.
layer() function can either take the layer name (e.g.
"Text Layer") or the layer index (e.g.
2) as it's input.
Using this in conjunction with the built in
index property (which is the index of the layer the expression is on) you can select layers relative to the current layer.
const layerBelow = thisComp.layer(index + 1);
Referencing the Current Layer
In the same way that you can use the
thisComp variable to get a reference to the current composition, there's also a
thisLayer variable that will always reference the layer the expression is on.
Will always return the name of the layer the expression is on.
Now that you've learnt the first two parts of the expression created by the pick whip (referencing the composition and layer) you can move onto referencing the layer attributes, such as position, opacity and scale.
thisComp.layer("Text Layer 2").transform.opacity;
What Layer Attributes Are
Each layer has properties that you can change, which you can see by 'twirling' the layer open in the timeline. Each one of these properties is an attribute of that layer.
A layers properties follow a parent-child hierarchy in the same way as compositions and layers. In a text layer (as per the above example) you can see that properties such as scale, position and anchor point are all children of the transform property.
Referencing Layer Attributes
When referencing the property in an expression, your mirror this parent child relationship by starting with the layer (
thisLayer) followed by the parent of the property, and then the property itself.
In the above example, transform is the property group (or parent) and opacity is the property.
You can learn more about the data types associated with each property in the Intro to Data Types article.
Properties vs Values
It's important to note that a property reference, such as
thisLayer.transform.opacity, is a reference to the property itself, not the value of that property.
You can append
.value to the property reference to get the value of the property.
// Reference to the opacity propertythisLayer.transform.opacity;// Reference to the opacity valuethisLayer.transform.opacity.value;
In most cases After Effects will automatically give you the value of the property when you reference it, but not always. Because of this it's always best to add
.value when you want to the value of the property.
There is a difference between referencing a property, and the value of that property
thisProperty and value
In the same way you can reference the current composition and layer by using
thisLayer, you can reference the current property by using
thisProperty. This is useful when you want to modify a keyframed value, such as add another value onto it or multiply it by a slider.
const controlAmount = thisLayer.effect("Animation Amount")("Slider").value;thisProperty.value * controlAmount;
You can also omit
thisProperty and write
Which will reference the value of the property the expression is on.
This is due to After Effects inserting the
thisProperty object reference automatically, which you can learn more about in the article on Native Attributes
In this article you learnt how to link to other layers properties using the pickwhip, as well as what each part of the expression means.
const anotherProperty = thisComp.layer("Another Layer").transform.position;