In this episode we look at how how fast a layer is moving by using the property expression, “speed” and then use that information to trigger an event on another layer.
The code we use in this setup is gonna open up a lot of new animation possibilities for you. While speed is the primary subject matter, it’s the supporting part of this code that actually does the heavy lifting. As usual, don’t forget to check out the code breakdown below after watching the video.
DISCLAIMER: For readers that copy and paste the following Expression code below, be aware that double quotes are currently showing as smart quotes. This is a PVC article default that I cannot override at the moment. I am looking for a workaround, but in the meantime you will need to make sure you paste the Expression code into a blank simple text document, NOT a rich text one, first to convert all code to simple text, then copy that and paste that into your Expression field in After Effects. Use TextEdit on Mac or NotePad on PC for this. If you paste directly into the Expression field without this step, you will end up keeping the smart quote formatting and it will cause a syntax error when you try to run the Expression. Just a heads up.
SOURCE CODE:
p = thisComp.layer(“Speeding Ball”).transform.position.speed;
if(p > 1000){
wiggle(6, 200);
}else{
[transform.scale[0], transform.scale[1]];
}
This setup is pretty simple and straight forward. You may recognize some of this code if you have been following the series and you will notice a new bit that isn’t written above if you watched the video. A bit of a teaser.
if(){}else{} – If you have been following the series, this one is gonna look familiar. I gave a full explanation in the AutoFade Layer code breakdown, so I will not get too deep into this one. An if/else statement is a Javascript native piece of code. You will not find it in any expression drop down menu anywhere inside After Effects. There is an entire catalog of non documented bits of code like this that will work in Expressions. A good place to start, which also happens to be where I learned a lot of Javascript too, is at W3Schools. Anyway, back to if/else. It basically allows you to have multiple options for your output. If something is true, then it will run some code, else if it’s not true then it will run some different code.
Math.sin() – Here’s a new piece of expression code we haven’t used yet in this series. I only briefly talk about it in the video, but don’t worry, I have a two part episode dedicated just to this expression coming next week. Some fun stuff on the way. 🙂 Math.sin() is a mathematical function, ya I know…. Math…. YUCK! Guess I was completely wrong in Junior high school when I thought I would never have a need for math because I was an artist. HA!, Wow was I way off the mark. Don’t worry, this math is cool and the computer really does the work anyway. So Math.sin() creates a sine wave, an oscillating positive and negative value from the current value. Here’s an animation to visualize it better.
CODE BREAKDOWN:
1) p = thisComp.layer(“Speeding Ball”).transform.position.speed;
2) if(p > 1000){
3) wiggle(6, 200);
4) }else{
5) [transform.scale[0], transform.scale[1]];
6) }
NOTE: The above expression is meant to be placed on the Scale property of a layer. It can be easily changed to work on nearly any layer property though. Scale is just one example.
Line 1: We create a variable called p, then assign it our Speeding Ball layer’s position speed. thisComp.layer(“Speeding Ball”) gets our Speeding Ball layer by name, alternatively you can use the layer index number if want as well. In this case it would be thisComp.layer(3) since the Speeding Ball layer is the 3rd layer. We then add .transform.position to get the layer’s Position value and then we add .speed to get the speed value of the position property.
p = thisComp.layer(“Speeding Ball”).transform.position.speed;
Line 2, 4, 6: This is our if/else statement. The first section (line 2), if(p > 1000){ is telling After Effects to check the value of p, which is our Speeding Ball Position speed, and see if that value is greater than 1000. We then define the start of the code to be executed if that statement happens to be true by using the open curly brace, {.
if(p > 1000){
The second section (line 4), }else{ tells After Effects that there is another option available if p is NOT greater than 1000. We first define the end of the previous code with a closing curly brace, }, then say else, then define the start of the second code option with another opening curly brace, {.
}else{
The third section (line 6) merely defines the end of the second code option with another closing curly brace, }.
}
The curly braces in general you will see in a lot of different programing languages. You basically are encasing a section of code as it’s own group, to help keep things tidy. { your code inside here }
Line 3: This is where you get to customize your final results. If line 2 turns out to be true, this is the code After Effects will run. I chose to wiggle the Scale property, you can run nearly any code you like. The wiggle() expression can be placed on most properties like Scale, Position, Opacity, Rotation, etc… which is why I used it in this example. You could easily place the full expression on the say the Opacity property and set Line 3 to 100 to make the layer fully visible, then have it disappear by making the alternate option (line 5) be 0. now you have a layer that turns off and on just like a stop light.
wiggle(6, 200);
Line 5: This is our alternate code to run if the if/else statement is false. Since I placed this expression on the Scale property, I chose to make the alternate option simply just relink back to our Scale property slider controls. I did this by making an Array with open and closing brackets, [ ]. Then I assigned the current layer’s X scale property to the first index, [transform.scale[0] ]. I then added the Y Scale property to the second index, making sure I separate the two Array items with a comma, [transform.scale[0], transform.scale[1]]. Remember from the Random Words Cycle code breakdown, that Arrays always start at 0, not 1. So we say scale[0] for X and scale[1] for Y. This is the same for Position, Anchor Point and any other property that contains multiple sliders for one property.
[transform.scale[0], transform.scale[1]];
Thanks again for checking out this series and spreading the word about it’s existence. Hope you keep finding these helpful. For next week I have a two part episode about Math.sin(). Some of these expressions just require more explanation plus as a viewer it’s always helpful to see a few examples. A lot of the expression code is not limited to just one property or creates only one effect, they can be combined and work in a variety of ways. It’s not always easy to explain them either with limitless options like that. Until next week, keep on practicing and experimenting.