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:

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

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

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':

js
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 (.aep)
• 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.

This parent-child relationship of compositions and layers is fundamental to how you use expressions to reference them.

Referencing Compositions

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:

js
const lowerThirdComp = comp("Lower Third");

js
[object Comp]

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

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.

js
const lowerThirdComp = comp("Lower Third");
lowerThirdComp.name;

js
"Lower Third";

Accessing the Current Composition

After Effects also provides a variable that is always equal to the current composition (the composition the expression is in).

js
const currentComp = thisComp;

For example, the expression:

js
thisComp.name;

js
"Lower Third";

Will always return the name of the current composition.

Referencing Layers

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:

js
const lowerThirdComp = comp("Lower Third");
const nameLayer = lowerThirdComp.layer("Name");

js
"Name";

Unlike the 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:

js
const layerTwo = thisComp.layer(2);

Will select the second layer in the composition.

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.

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

For example:

js
thisLayer.name;

js
"Name";

Will always return the name of the layer the expression is on.

Layer Attributes

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.

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

js
thisLayer.transform.opacity;

In the above example, transform is the property group (or parent) and opacity is the property.

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.

js
// Reference to the opacity property
thisLayer.transform.opacity;
// Reference to the opacity value
thisLayer.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.

thisProperty and value

In the same way you can reference the current composition and layer by using thisComp and 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.

js
const controlAmount = thisLayer.effect("Animation Amount")("Slider").value;
thisProperty.value * controlAmount;

You can also omit thisProperty and write value alone.

js
value;

Which will reference the value of the property the expression is on.

Wrapping up

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.

js
const anotherProperty = thisComp.layer("Another Layer").transform.position;