Applying Modern Javascript Functions & Methods for Automated Workflows in Adobe After Effects
- Roland Kahlenberg
- Apr 8
- 4 min read
Creating Graphs and Tables are common exercises in Automated Creative Workflows in Adobe After Effects.
What's not uncommon is the small percentage of Adobe After Effects users who take advantage of Modern Javascript to speed up Expressions writing and performance.
These are the Modern JS functions we'll be looking at :
Template Literals
Spread Operator
toSorted()
We'll also be using intermediate-level functions and methods - Math.min, Math.max, and indexOf,
In the Expression below, we use an array of numbers which could also be a list of numbers read for a spreadsheet or via a TSV or CSV file imported into Adobe After Effects.
Below is an Expression applied to a Text Layer's text.sourceText property.
The following Video shows a use-case for these Modern Javascript functions.
// Start of Expression
// Declare Numbered Array var myNumberedArray_unsorted = [5, 1, 0.001, 35.2];
// Use toSorted to create new arrays in Ascending and Descending orders.
var mySortedNumbers_Ascending = myNumberedArray_unsorted.toSorted((a, b) => a - b);
var mySortedNumbers_Descending = myNumberedArray_unsorted.toSorted((a, b) => b - a);
// Use Math.min, Math.max and the Spread Operator to obtain the Minimum and Maximum Values in the Original (unsorted) Array. We could have gotten the Minimum/Maximum values from the sorted arrays too.
var minimumNumber = Math.min(...myNumberedArray_unsorted);
var maximumNumber = Math.max(...myNumberedArray_unsorted);
// Use indexOf to obtain the indices of the Minimum and Maximum Values in the Original (unsorted) Array.
let minimumIndex = myNumberedArray_unsorted.indexOf(minimumNumber);
let maximumIndex = myNumberedArray_unsorted.indexOf(maximumNumber);
// Use Template Literal to write out the details
` This short lesson showcases the use of Modern Javascript in After Effects Expression.
We'll use the following Modern JS functions -
- Template Literals ${``}
- Spread Operator (...)
- toSorted()
This is the original array, [${myNumberedArray_unsorted}]
Here is the Numbered Array in Ascending Order: [${mySortedNumbers_Ascending}]
Here is the Numbered Array in Descending Order: [${mySortedNumbers_Descending}]
This is the Minimum Number: ${minimumNumber} and it's index in the Original Array is ${minimumIndex}
This is the Maximum Number: ${maximumNumber} and it's index in the Original Array is ${maximumIndex}
// End of Expression
Additional Notes and Relevant URLs
URLs for JavaScript functions & methods used:
Template Literals:
Template Literals use backticks (`) to create strings with embedded expressions, like ${variable}. Template Literals are used as a replacement for the older way of writing Text Strings which uses explicit “” to encompass Text Strings and \n\r to declare line breaks. Think of Template Literals as a more human-readable way of writing out dynamic texts in After Effects Expressions.
In the lesson, they format the output text cleanly, combining arrays and variables into a readable display for After Effects.
Arrow Functions:
Arrow functions, written as (parameters) => expression, offer a shorter, more modern syntax for defining functions compared to traditional function declarations (e.g., function(a, b) { return a - b; }). They’re especially handy for concise, one-line operations and don’t bind their own ‘this’ value, which simplifies scoping in many cases.
In the lesson, they’re used in toSorted() as (a, b) => a - b for ascending order and (a, b) => b - a for descending order; these compact functions tell toSorted() how to compare two numbers at a time (a and b), returning a negative, zero, or positive value to determine their order—crucial for sorting data efficiently in After Effects visualizations.
They’re used here in toSorted() to define how numbers are ordered, making the sorting logic compact and clear.
Spread Operator:
The Spread Operator (...array) unpacks an array into individual elements for functions that take multiple arguments. The spread operator is a way of saying, take everything/every element from here and do something with it.
In this lesson, it’s used with Math.min() and Math.max() to find extremes by passing all array values at once, avoiding manual iteration.
Math.min():
Math.min() returns the smallest number from a set of arguments, perfect for finding a minimum value.
In this lesson, it identifies the smallest number in the unsorted array, useful for highlighting or ranking data.
Math.max():
Math.max() returns the largest number from a set of arguments, ideal for pinpointing a maximum value.
It’s applied here to find the biggest number in the array, enabling emphasis on extremes in visualizations.
toSorted():
toSorted() creates a new sorted array without changing the original array, using a comparison function.
This lesson uses toSorted() to sort numbers in ascending and descending order; showing how to organize data for Display or Animation.
indexOf():
indexOf() finds the first index of a specified value in an array.
It’s used in this lesson to find the index position of the Minimum and Maximum numbers in the original array; providing us with a way to link back to the source date. It’s one way to link a value to its source to obtain more details. For example, you may want to know which month had the lowest/highest value or which month’s value was above the median value?
Further Reading:
sort():
https://developer.mozilla.org/en-US/docs/Web/JavaScript Reference/Global_Objects/Array/sort
sort() modifies an array in place based on a comparison function, unlike the non-mutating toSorted(). Explore this to compare with toSorted(), understanding trade-offs in mutability for After Effects scripting.
`
Comments