skip to Main Content

After Effects Expressions & JavaScript

variable

Updated: 28 December 2020

A variable can be thought of as a container you use to store information. You create a variable in After Effects by simply giving it a name and assigning it a value.

Give your variable a name

  • Start with a letter, dollar sign, or underscore, from there you can use numbers as well.
  • No symbols, spaces, or punctuation marks (except underscore and dollar sign).
  • It can be as long as you want.
  • All code in JavaScript, including variables, is case sensitive (e.g. frog ≠ Frog).
  • You can not use JavaScript reserved words, (if is a reserved word, however, If is not).

Give your variable a value
In JavaScript you declare a variable by proceeding it with var (that’s one of those reserved words, by the way), so if you wanted a variable named C to equal 12, it would look like this:

var C=12;
C
//The variable C returns: 12

The first line declares the variable and After Effects assigns the value 12 to C. The single equal sign assigns a value to a property or variable, it does not evaluate a value (e.g. it does not determine if variable A is equal to variable B).

Because line 2 only contains the variable C, it assigns the value 12 to the property the expression is placed within.

Usually, when writing expressions in After Effects, the var declaration is left out, so it would look like this:

C=12;
C
//The variable C returns: 12

The reason for this is that in Javascript the var expression is used to create global variables that can remain throughout an entire JavaScript program. Their values can be changed, but the variable name cannot be erased. However, the variables created within a property’s expression field do not exist beyond that expression field. Variables exist only in the expression field in which they are created. Also, variable values of one property’s expression field cannot be accessed from another property’s expression field. When you access the final result of an expression within a property field, you are accessing the current value of that property itself, not the value of any particular variable.

While you can declare a variable using var in an expression field, you don’t need to.  You can simply state your variable name, then attach a property value, an expression control value, or a calculation result to it.

Types of variables

Besides containing a single value, such as 12 in the example above, variables can hold information such as:

String

A string within a variable refers to text, including numbers and spaces, that is identified by placing the string between quotation marks (“moose”) or single quote marks (‘moose’).

R="Fred"; //R contains the text: Fred
R="This is a string."; //R contains the text: This is a string.
R=12; //R contains the value: 12
R="12"; //R contains the string: 12, which After Effects will read as text or a value, depending on how the variable is used.

Array

Think of an array as an ordered list, separated by commas, within a variable, which can be composed of numbers, strings, or include both. Arrays can also contain arrays.

R=[12,13]; //R contains an array, which is read in order 12 then 13
R=["Fred","Bob","Jane","Mary"]; //R contains an array, which is read in order, Fred, Bob, Jane, Mary.
R=["Jane",42]; //You can mix strings and numbers in an array.
R=[[345,123],[453,982]]; //Arrays can hold arrays

Notice one of the examples above mixes a string and a number. If you place a string that contains letters in an expression that requires a number you’ll get an error. However, if the string only contains digits, then After Effects will read it as a number.

//EXAMPLE 1 
R=52; 
R 
//Returns 52 
//EXAMPLE 2 
R="52"; 
R 
//Returns 52 and will read it as a number if a number is required. 
//EXAMPLE 3 
R="fifty-two" 
R 
//Returns fifty-two and gives you an error if a number is required. 
//EXAMPLE 4 
fiftyTwo=52; //A variable cannot contain a space or a dash. 
R=fiftyTwo; //No quotation marks 
R 
//Returns 52 
//EXAMPLE 5 
fiftyTwo=52; 
R="fiftyTwo"; //Quotation marks 
R 
//Returns fiftyTwo and gives you an error if a number is required.

In the above examples, if R needed to be a number, say for the rotation property, then anytime the R did not return the digits 52 you would get in error.

Working with arrays

How adding and subtraction works with arrays 

Adding and subtracting with arrays is straight forward. The values are paired by their position within the array.

[6,3] + [3,1] = [9,4]

[6,3] – [3,1] = [3,2]

If the arrays don’t contain the same amount of values, the missing positions are ignored.

[6,3] + [3,1,8] = [9,4,8]

[6,3,8] – [3,1] = [3,2,8]

Identifying what part of an array you want to work with 

If you have an array within a variable, but just want to deal with a single piece of information you add a position number after the variable enclosed in brackets. Like frame counts, the first position is numbered 0, not 1.

P=[23,34,11]; //Assigned the variable P the array [23, 34, 11]
X=P[0]; //Assigned the variable X the first position in the variable, which is 23
Y=P[1]; //Assigned the variable Y the second position in the variable, which is 34
Z=P[2]; //Assigned the variable Z the third position in the variable, which is 11

To access an item within a variable holding an array you enclose its position number within brackets. Again, note that the first position is number 0, the second is number 1, and so on.

R=[[345,123],[453,982]]; //This array contains two arrays
T=R[1]; //T was assigned the second of R's two arrays [453,982]
B=T[0]; //B was assigned the first value of T's array 453
R=[[15,34],[76,90]]; // R is assigned two arrays: [15,34] and [76,90]
R[1][0] //R returns 76, the first brackets find which array is requested, the second which position in that array it should return
WOTM: Adobe After Effects® Expressions Graphic
Return To:
JavaScript Tour
Back To Top