The Language of Expressions
***** Important Update for 2018*****
I wrote this section many years ago and while the if/else formatting I present in the single-line examples below is not technically correct, the After Effects expression engine has always accepted it. The October 2018 release of AE includes a new, more strict JavaScript engine. While you can still get away with this:
if (rotation < 180) 100; else 50
I'd recommend that you just always use curly braces to enclose your statements, like this:
if (rotation < 180){ 100 }else{ 50 }
or this:
if (rotation < 180){
100;
}else{
50;
}
**********************************
if/else Conditional Code
When writing expressions you will often encounter a situation where your code needs to make a decision based on some condition. As a simple example, say you had a rotating object where you wanted it to have 100% opacity if it was pointing to the right but only 50% opacity if it was pointing to the left. Assuming that a rotation of zero degrees corresponds to our object pointing up, we could use JavaScript's conditional "if/else" pair to implement this very easily. The code for our Opacity expression looks like this:
if/else example
if (rotation < 180) 100 else 50
Let's's break this down. "if" is the JavaScript keyword that tells the expression that this is a conditional statement. Next comes (always in parentheses) the condition to test for. In our example we're checking to see if the rotation is less than 180 degrees. The next part ("100" in this case) tells the expression what to do if the condition is true. In our case "100" will be the expression-ending code that causes the opacity to be set to 100. Next comes the optional JavaScript keyword "else" that tells After Effects that we also have something that we want the statement to do if the condition is false. Finally you have the piece that tells the expression what to do if the condition is false. In our example, if the condition is false, Opacity will be set to 50 instead of 100.
There are other ways to structure this and we'll examine a few here. Notice that you can have an "if" statement without an "else" clause. We could have used this code to get the same results:
t = 50;
if (rotation < 180) t = 100;
t
An important thing to note here is that the expression must evaluate to something or it will generate an error. For example, if you were to enter this expression:
if (rotation < 180) 100
After Effects would accept it and you might think that everything was OK, but the expression would fail as soon as the Rotation value exceeded 180 because After Effects wouldn't have anything to use as the final result. Now let's look at slightly more complicated way to set up our first example:
if (rotation < 180){
100
}else{
50
}
This version accomplishes exactly the same thing as our first example. So why would we do it in a more complicated way? Well, in this case we probably wouldn't. But it illustrates an important concept. This is how you can have the expression execute multiple statements based on the condition. The key is the curly braces ("{" and "}"). You can use these in either (or both) of the true and false parts of the expression. Note that there are different ways to format the curly braces, but I like the style above and that's what you'll see in the examples on this site. Using the braces you can include as many statements as you like in each section of the expression. You can even include additional if/else constructs.
Comparison and Equality Operators
This is probably a good place to mention JavaScript's comparison operators. In our first examples above we've been using the "less than" (<) operator to compare two operands in the condition part of the if statement. There are some others that you will find very useful, such as "greater than" (>), "less than or equal" (<=), and "greater than or equal" (>=). There are also a few "equality operators", two of which you will use often. These are "equality" (==), which evaluates to true if the two operands it separates are equal, and "inequality" (!=), which evaluates to true if the two operands are not equal. It is very common to make the mistake of using a single "=" character as the equality operator. JavaScript will let you do it but you will not get the result you are expecting and it will lead to seemingly strange behavior of your expression. Watch out for it!
Logical Operators
Closely related to the comparison and equality operators are the logical operators. There are three of these and you will need them occasionally in your expressions. These are logical "and" (&&), logical "or" (||), and logical "not" (!). Logical "and" evaluates to true if the operands on both sides of it are true. Logical "or" evaluates to true if an operand on either side is true. Logical "not" only has one operand (immediately to its right) and it inverts the state of its operand. That is, it evaluates to true if its operand is false and evaluates to false if its operand is true.Let's look at a couple of examples. Let's go back to our first example and change the requirements a little. Let's say that now we want Opacity to be 100 if Rotation is less than 90 or greater than 270 and 50 otherwise. Our new code will look like this:
logical operator example
if (rotation<90 || rotation>270) 100 else 50
This expression is saying "set Opacity to 100 if Rotation is less than 90 or greater than 270". It's important to notice the precedence of the operators. "<" and ">" are evaluated before "||" so we don't need to add any additional parentheses to the expression.
OK - we'll look at one more example. Let's say that what we really want is Opacity of 100 when Rotation is between 0 and 90 or between 180 and 270, otherwise we want Opacity to be 50. Here's the code that will accomplish that:
multiple logical operators
