Comparing items
In JavaScript you can easily compare two items using one of the following options:
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:
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:
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.
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
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
Learn more about the Remainder Operator
Multiple Conditions (this and that)
In Javascript, we can use what's called logical operators to compare multiple items.
For example:
Now let's put this to practice. Place this on a Rotation property:
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:
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!
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:
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:
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.