Here's an excellent After Effects Expression you should have in your Expressions Library - including an introduction to Regular Expressions and Reproducible Code.
- Roland Kahlenberg
- May 2
- 12 min read
Updated: May 6
We sometimes use numbers in strange ways in After Effects - we're not just Motion Artists but we're also librarians; we use numbers as part of our naming conventions to organize Assets, Layers, Compositions and Effect Properties. We're a lot about getting organized, to help us be more organized.
Numbering your assets appropriately and where appropriate is just as important as "NAME YOUR LAYERS!".
We often use a sequential numbering system to organize After Effects objects based on a preferred ordering system such as the date, relevance, preference, or based on a functional or structural grouping. When used with Expressions, especially the valueAtTime() Method, we use a number in a Layer's Name to create staggered animations; where the number in a layer's name is used as a time offset.
Why the split() Method is not ideal for capturing a number in an object. The split() Method is really useful but it was not developed to select numbers - there's a more effective way to select one or more numbers in a text string or array.
Most After Effects users use the split() Method to capture one or more numbers in a Layer's Name. While this works, it does require the number to be perfectly placed at the same relative position within the Text String that forms a layer's name.
So, given a Layer Name, "AEcronies_40". We would use the following Expression –
thisLayer.name.split("_")[1]
This provides the result, 40. If we now change the naming convention and we instead have the name, "AEcronies40" and we applied the same Expression –
thisLayer.name.split("_")[1]
We would get "" or a Null as the result – nothing is captured because the new naming convention does not have an underscore preceding the number. So, this strict requirement when using the split() Method is a nuisance and not a very intelligent way to write what I call Reproducible Code.
Reproducible Code is an Expression that works auto-magically when the object the Expression is applied to is duplicated or the Expression is copy-pasted onto another object. Quite often, Reproducible Code makes use of one or more numbers in an object to achieve its task. We will see Reproducible Code in action in the examples below.
Using Layer Index is also a popular choice for introducing a number into an Expression.
However, the issue with the Layer Index function is that it isn't unique nor persistent to a layer - a layer's Layer Index may change as layers are added to or removed from a Composition.
Reproducible Code helps speed up the deployment of Expressions across multiple properties.
In my Advanced After Effects course, I have a section called "Code of Coduct". It's an integral part of the course where we cover ways to write performant and readable code as well as ways to write code to help us speed up development. I turned parts of the course material into a Podcast which you can listen to here - https://www.broadcastgems.com/post/how-to-write-performant-expressions-in-adobe-after-effects-developing-intelligent-bespoke-motion
The Better Way to search for one or more numbers in object names in After Effects is to use the Regular Expression match() Method.
Regular Expressions is a coding language unto itself. It is used within other programming languages - it is robust and extremely useful. If you want to step into the world of Expressions in a professional manner, you must have a basic and functional knowledge of Regular Expression. It gets very deep and dark but fortunately for us, Large Language Models are quite the expert in the use of Regular Expressions.
Regular Expressions were developed to allow for an efficient and robust way to search for patterns in a string or data set. A pattern can be specific (literal) or generic (meta). You may search for a specific Name, Address, and Telephone Number or you may search for a single, specific Telephone Number.
The following two Youtube Videos serve as an exceptional introduction to Regular Expressions. The series is much longer but from a foundational POV, the first two videos are sufficient.
LLMs (Large Language Models) are excellent at reading and writing Regular Expressions. Hence, being able to understand what Regular Expressions do and what are Literal Characters, Meta Characters and Groupings are sufficient, for me. There is of course no issue other than the time and opportunity cost if you want to venture further than the first two videos.
In this first match() Method example below, all layers have a single number in its name.
We use the naming convention; "Shape Layer n", where n is a number starting from 1 and sequentially, this number increments by 1, for each additional layer.
We use the Regular Expression, (RegEx) match() Method to capture the First Number in each Layer's Name, other than the keyframed layer.
The Expression is written as -
thisLayer.name.match(/\d+/)
The Breakdown - thisLayer.name is a reserved After Effects function which points to the current layer to obtain its name. The result is a Text String.
RegEx match() Method starts and ends with the forward slash, /. We add the RegEx match() Method argument, /d+ captures a sequence of Digits. The "+" after the "d" ensures we capture leading and trailing zeroes and not just a single digit.
Without the "+" and with the layer's name written as, "AEcronies_40", and we apply the Expression –
thisLayer.name.match(/\d/);
The result will be 4, instead of 40 and chances are we want the result to be 40 instead of 4. Hence, to capture the entire sequence of the First Digit, we write the Expression as - thisLayer.name.match(/\d+/).
So, the Expression captures the first sequence of digits in a Text String.
In a real world scenario, the entire Expression to create a staggered animation will look similar to the Expression below –
// START of EXPRESSION
// Declare Target Layer and Target Property.
// This is the layer with keyframes on its Position Property.
const targetLayer = thisComp.layer("Shape Layer 1");
const targetProperty = targetLayer.transform.position;
// Use Regex match() Method to get the First Number in This Layer's Name
// This Layer's Name is - "Shape Layer 2"
const thisLayerNameNumber = thisLayer.name.match(/\d+/);
/*
Use framesToTime Method to convert the First Number in This Layer's Name to seconds because After Effects calculates, internally, in seconds and we want to use
the First Number in This Layer's Name as a frame count and not seconds because seconds would be too long for the effect we're after.
*/
const frameOffset = framesToTime(thisLayerNameNumber);
// Calculate position based on Time Offset
targetProperty.valueAtTime(time - frameOffset/2) // END of EXPRESSION
Here's an example that uses the Color Balance (HSL) Effect to offset the Lightness value – layer's starting later have a lower Lightness value.
Here's the Expression that is applied to the Lightness Property –
// START OF EXPRESSION
const lightnessStepStrength = thisComp.layer("Controller").effect("Lightness - Step Strength")(1);
const thisLayerNameNumber = thisLayer.name.match(/\d+/);
value - (thisLayerNameNumber * 10)
// END OF EXPRESSION
What if the layer naming convention contains more than one sequence of digits - such as, "Shape Layer 1 01"?
If you are working with an Image Sequence, the images will have names with a numbered suffix which may not be ideal for use in Expression Calculations that create a staggered animation.
I did write earlier that RegEx is robust. So, here are Expressions to get you over such hurdles –
** NOTE: We use the Layer Name, "Google Sheet 1-2-003", for all the examples below.
// // Use RegEx match() Method to capture the First Sequence of Digits in this layer's name
thisLayer.name.match(/\d+/)
---------------------------------------
// Use RegEx match() Method to capture the Second Sequence of Digits in this layer's name
// Perform simple Math Operation to check result
4 - thisLayer.name.match(/\d+/g)[1]
---------------------------------------
// Use RegEx match() Method to capture the Third Sequence of Digits in this layer's name
// Perform simple Math Operation to check result
4 - thisLayer.name.match(/\d+/g)[2]
---------------------------------------
// Use RegEx match() Method to capture all Sequence of Digits in This Layer's Name.
const myLayerNameNumbers = thisLayer.name.match(/\d+/g);
// Get the number of sequences of Digits in This Layer's Name.
const myLayerNameNumbersLength = myLayerNameNumbers.length;
// Get the Last Sequence of Digits in This Layer's Name
myLayerNameNumbers[myLayerNameNumbersLength - 1]
Let's wrap up the match() Method section with one more example – the scenario is a Responsive Sports Table that shows the Name of Players from two competing teams. The user is able to set the Number of Players on each team so that the same table can be used to show two teams from different sports; each sport having a different number of players on a team.
So, this is going to be a Responsive Sports Table that automatically resizes, re-positions and re-animates. A user will want to automatically enable/disable player-related layers based on the number of players selected.
To craft the mechanics, we create a Slider Control named, Number of Players. We will allow for a minimum and maximum of 1 and 15 players per team, respectively.
We write an Expression that captures the result of the Number of Players Slider. We will then use this value as part of a Conditional (if...else or Ternary Conditional) and compare it to the number in a layer's name.
An easy way to implement the Conditional is to use a Layer Naming Convention that includes a number for each layer that is related to a specific player. We take note that layers related to a player will include more than a layer and may include the following details: Player Number, Player Name, Player Position.
We will also incorporate Reproducible Code so that the same Expression can be used for all player-related layers.
So, if a player's layer is named, Player Name - Home Team n, where n is an incrementing number that starts from 1, we write our Expression in each layer's Transform > Opacity property as such –
// Get First Digit in Layer Name
const myLayerNameNumber = thisLayer.name.match(/\d+/);
/*
Use Ternary Conditional to check if this layer's First Digit is higher or equal to the slider value of Number of Players. If Number of Players is greater than or equal to This Layer's Number, we set its Transform > Opacity to 100
*/
thisComp.layer("Controller").effect("Number of Players")(1).value >= myLayerNameNumber ? 100 : 0
We used a naming convention that helped us identify each player uniquely and which also allowed us to craft an Expression that is essentially a type of Reproducible Code – able to be copied and pasted onto other layers and have them work, auto-magically, providing expected results without any editing.
So, we can copy this Expression and paste it to all layers related to displaying a player's information - Player Name, Player Team Number, and Player Position.
This concludes our section on the RegEx match() Method. It is exceptionally robust, easy to implement and has lots of use-cases in After Effects.
In the future, if you find yourself using Layer Index or the split() Method, STOP! Then, think how you can instead use RegEx match() and to also write the Expression in such a way that it is a Reproducible Code.
The split() Method is really useful but there is a better way if you're looking for one or more numbers or a specific text string pattern.
Parting Question
How would you write an Expression using RegEx match() to capture a number with decimals?
Try the following prompt in Chat GPT, Claude or Grok3 and any other LLM -
I am using RegEx match in an After Effects Expression in the following manner -
thisLayer.name.match(//\d+)
This captures the first sequence of digits in the layer name. However, I now want to ensure the expression captures a sequence of numbers or digits with a decimal number in other words, non-integers and also negative numbers that may be non-integers.
Click to View the Expression
Click to view Long Answer
A close complement of the RegEx match() Method is the replace() Method.
The replace() function searches a string for a RegEx pattern and replaces matches with a specified string. The replace() Method is identical to the match() Method but includes an additional argument; comma-separated, to specify the replacement text string.
It takes two arguments: the RegEx pattern and the replacement text. As it is with the match() Method, without the global flag (/g), only the first match is replaced.
With /g, all matches are replaced. In After Effects, the replace() Method is ideal for replacing parts or all of an object's name, replace font(s) or write out new text dynamically.
// Replaces the first Digit Sequence in Layer Name with "XYZ"
.
// Use this as the Layer Name - Layer_001_Text
var newName = thisLayer.name.replace(/\d+/, "XYZ");
newName
---------------------------------------
// Removes all Digit Sequences from the name
// Use this as the Layer Name - Layer_001_Text 2
var noDigits = thisLayer.name.replace(/\d+/g, "");
noDigits
---------------------------------------
// Replaces the last Digit Sequence with "999"
// Use this as the Layer Name - Layer_001_Text 02
var digits = thisLayer.name.match(/\d+/g);
var lastDigit = digits[digits.length - 1];
var modifiedName = thisLayer.name.replace(lastDigit, "999");
modifiedName
This concludes our look into using the Regular Expression replace() Method.
These are introductory notes and samples and yet they will be useful in After Effects; allowing you to tackle intermediate problems or to provide intelligent solutions with Expressions
Parting Question
How would you write an Expression using RegEx replace() to write a sentence dynamically based on a conditional?
Summary
Regular Expressions are robust and flexible. The negatives are they are not what's called readable or human readable. They are also likely to be less performant than the more straight-forward split() Method.
In a real world setting, RegEx is preferred when working with unknown or variable data structures. However, if naming conventions are known and are applied uniformly, then the split() Method should be preferred due to its more performant result and its more readable attribute.
Keep these in mind when developing Motion Brand Toolkits or other types of Motion Systems. So, it is prudent to develop IDAs (Intelligent Design Assets) Component Elements using RegEx but when sending out deliverables, the split() Method should be preferred, for its more performant nature - this is one way of writing more performant code.
You will also want to appreciate the use of RegEx to more quickly craft prototypes so you and the client can start testing out actual use-cases as well as edge cases, where you will push the Motion Template/Toolkit to see how and when it can be used.
I've got a Podcast on writing Performant After Effects Expressions which is a good listen if you write a lot of After Effects Expressions or if you have an interest in getting into this area.
The now and the future is a lot about combining code with almost everything we do - it's the only way to guarantee repeatable and scalable results within a system.
Here's the link to the podcast - https://www.broadcastgems.com/post/how-to-write-performant-expressions-in-adobe-after-effects-developing-intelligent-bespoke-motion
About the Author -
Roland Kahlenberg is a Consultant | Developer | Trainer
in the area of bespoke Automated Content Creation & Motion Brand Toolkits
Roland is part of the Adobe Video Solutions Partner Program. He develops solutions and conducts After Effects, Premiere Pro and BorisFX Mocha training. Roland is also a BorisFX Mocha Certified Trainer.
Find out what Roland is up to if you want to live on the edge of Motion Graphics Design Systems, Motion Brand Toolkits & Scalable Content Creation - take a look at a recent Reel of IDAs (Intelligent Design Assets).
Comentários