The Expressions Cheat Sheet
Loading...
if(true){
// do this
} else {
// do that
}

Comparing items

In JavaScript you can easily compare two items using one of the following options:

A == B	// A is equal to B
A === B	// A is equal value and equal type B
A != B	// A is not equal B
A !== B	// A is not equal value or not equal type B
A > B //A is greater than B
A < B	//A is less than B
A >= B	//A is greater than or equal to B
A <= B	//A is less than or equal to B

The shtick here is that comparing two items is like asking the computer a question. The answer will always be either true or false. For example:

 time == 10 // will be true only when the current time is 10 seconds

true or false, that's great! This is exactly what we needed to create an if-else statement.

Using a Checkbox as a condition

Let's make a layer rotate but only when a checkbox is active.
First, we'll add a checkbox by selecting the layer and going to Effect -> Expression Controls -> Checkbox Control.
Now let's add the following expression to our Rotation property:

var checkbox = //pickwhip to your checkbox
if (checkbox.value) {
	time * 360;
} else {
	value
}

Use the Pickwhip tool to select the checkbox, like so:

And that's it! If the checkbox is selected, our layer will spin, otherwise it will maintain its original value.
Try clicking this checkbox to see the result in action:

Cool! Let's try to do the same thing with a Position property.

var checkbox = //pickwhip to your checkbox
if (checkbox.value) {
	var x = random(-15, 15);
	var y = random(-15, 15);
	value + [x,y];
} else {
	value
}

Don't forget to parent to your checkbox like before! Now, when our checkbox is active our layer will shake. Cool!

Rotate, but only if time is bigger than 5 seconds

if(time >= 5){
90
} else {
-90
}

Don't let your eyes off the image. It might take up to 5 seconds for the timeline to reach the 5 seconds mark, but eventually, it will flip.
If the current time is 5 or above, the statement "time >= 5" evaluates to true. In that case, the Rotation property will be set to 90 degrees. On any other occasion, it will be set to -90 degrees.

Rotate, but only every other second

if(Math.floor(time)%2 == 0){
-90
} else {
90
}

Learn more about the Remainder Operator

Learn more about Remainder

Multiple Conditions (this and that)

In Javascript, we can use what's called logical operators to compare multiple items.

&& // and
|| // or

For example:

10 == 10 && 0 == 0 // true, because both are true
10 == 10 && 0 == 10 // false, because the second statement is false
10 == 10 || 0 == 10 // true, because at least one of the statements are true (the first one)

Now let's put this to practice. Place this on a Rotation property:

if(time > 3 && time < 7){
time * 360
} else {
0
}

Now, only when time is bigger than 3 and smaller than 7 our layer will rotate. How cool is that?
We are using the && operator to make sure both conditions are true. It takes only one of them to fail in order to consider the entire thing as false.

Let's try to use the || operator to create the inverted effect:

if(time < 3 || time > 7){
time * 360
} else {
0
}

Cool! with the || operator we only need one of the statements to be true to consider the entire thing true.
When the time is smaller than 3 it's enough to consider the statement true, even though time isn't bigger than 7, and vice versa.

A lot to wrap your head around? Don't panic!

You've just been introduced to a lot of new characters, == && || <= >=, this can feel like a lot at first.
Take a deep breath and try to remember that you are talking to a computer here. All of these symbols represent questions that humans are using in real life.
Is the Apple Red && the Banana yellow? true, the apple is Red and the Banana is yellow.
Is the apple Red || the Banana purple? true, because the apple is red.
Is 5 > 10 ? false, 5 is smaller than 10.

You are already proficient in asking and answering those questions yourself, the logic is very simple, and while the syntax takes some getting used to, I believe in you!

 value == 10 // will only be true if the value of this property is 10
 value == [0,0] // DOES NOT WORK! will be false, because you can't compare arrays with comparison operators
value[0] == 0 && value[1] == 0 // will be true if the value is [0,0]

ternary

As it turns out, there are other ways to ask a question in JavaScript and do something based on the answer.
The ternary operation is a more compact form of an if-else statement:

 condition ? doThisIfTrue : otherwiseDoThis

We ask a question followed by a question mark and a colon. If the answer is true, do what's after the question mark, otherwise do what's after the colon.
For example, we can convert some of our expressions from before into one liners:

time >= 5 ? 90 : -90
Math.floor(time)%2 == 0 ? 90 : -90

As you can see, we are asking the same questions we did in the previous if-else statements we covered. The result should be the same.