About that Checkbox Control

The checkbox control returns a value which is either 0 or 1. In JavaScript, 0 and 1 are synonymous to false and true, which means you can use them as a condition (read more about truthy and falsy).
However, in my experience Pickwhiping to the Checkbox Control is sometimes not enough to get it working properly and that's most likely due to precision issues.

A walk-around that works for me is to add ".value" after the Pickwhip result, or put the entire thing inside a Math.round() function.

//Option A:
effect("Checkbox Control")("Checkbox").value;
//Option B:
Math.round(effect("Checkbox Control")("Checkbox"));

‍

‍

Reference values from other properties

We can use the Pickwhip to reference the value of a slider in our expression, which will give us a number that we can use to control something else.

Reference properties from other comps

By opening multiple lines you can use the Pickwhip to select a property from a different comp.

‍

While we are at it, I once made a song about parenting in After-Effects.

‍

Random Rotation

Apply this to a Rotation property:

random()

‍

It might not be very obvious, but if you look closely you can see the image is rotating ever so slightly.
The image gets a new random rotation between 0 to 1 degree, which is very little.

Fortunately for us, we can give random a multiplier!

random(360)

Now our Rotation property will be randomly set to anywhere between 0 and 360 every frame. Cool, fuzzy but cool.
Let's tone it down a notch:

random(10);

This is cool, but it almost feels like something is wrong. Oh, I know! Our layer is only leaning to the right. That's because random(10) gives us a number between 0 and 10.
Fortunately for us (we are very lucky today), random is very kind. If we give it two numbers instead of one, it treats them as a range.

random(-10,10);

That should do the trick. Now the layer should rotate 10 degrees to either direction.

‍

Move in random directions

the Position property usually expects two values in an Array. This should do the trick:

var max = 50;
var randomX = random(-max, max);
var randomY = random(-max, max);
value + [randomX, randomY];

Now we can easily specify what is the maximum amount of randomness we want to add to the original value.
The result is very similar to wiggle(), the difference is that wiggle tends to be smoother and transition between new values slowly and across multiple frames.
Random as mentioned before gives you a completely new value every frame, resulting in a much sharper, more brutal transition.

‍

Random Color (Warning: flashing lights)

A color in expressions is usually represented by an array of normalized values (0 to 1), a value for each color channel (Red, Green, Blue, Alpha).
Although alpha is many times ignored in most color properties, for some reason it might be required.

Either way, to create a new random color every frame we can use the expression below:

[random(), random(), random(), 1];

random() is serving us well here because a value between 0 and 1 is exactly what we need.
Uncheck "Pause" to see the color value changing randomly (warning: flashing lights):

‍

‍

‍

Rounding down to seconds

As you probably have noticed, the result of "time" is a float, which means it shows the fractional part of the number.
If we want to round our number to only display the current second, like a clock handle, we can do it like so:

Math.floor(time);

‍

Rotate across time

Apply this to a Rotation property and hit preview.

time * 360

Every one second the rotation will finish a 360-degree lap! That's so cool!

To make it easier to manipulate, we can do something like this:

var lapDuration = 2; // in seconds
time * 360 / lapDuration;

Now we can easily change "LapDuration" to decide how long we want our Rotation property to complete one lap.

Rotate faster, then faster and faster and faster...

Try applying this to a Rotation property:

time * time * time * time

Press play. At first, your layer will rotate very very slow, but keep going! It will accelerate and start rotating faster and faster until it's almost too fast for your eye to register to motion properly.
What a cool simple trick right? We are literally multiplying the current time by itself 4 times. By the 2 seconds mark the result is 16 degrees, which is not that impressive. But this increases exponentially, and by the time the timeline hits 10 seconds, we are already at 10,000 degrees! Holy cow.

The exact same expression can also be written down this way:

Math.pow(time, 4)

Math.pow stands for power. We ask our friend, Math.pow() to check for us the result of the current time to the power of 4, which is the same as multiplying time by itself 4 times. Neat!

‍

Wiggle Position

wiggle(5, 45) // [x,y]

Wiggle Position, one dimension only

On a position property wiggle returns two values: [x,y].
We can place the wiggle result in a variable, and then reconstruct a new result, one that retains one of the original value channels.

var w = wiggle(5, 45); // x and y
var result = [ w[0], value[1] ]; // set x from the wiggle result, and y from the original value
result; // apply

To wiggle the Y-axis only:

var w = wiggle(5, 45); // x and y
var result = [ value[0], w[1] ]; // set x from the original value and y from the wiggle result
result; // apply

Wiggle Rotation

wiggle(5, 45) // number

‍

Wiggle Colors

Colors are just arrays, just like points in space. That's why wiggle also works on Color properties.

wiggle(5, 0.5) // [number, number, number, number]

It's important to keep in mind that wiggle manipulates the original value. In order to wiggle a color in the full spectrum you probably want to set the original color value to be perfect gray (#808080) and the  amplitude to 0.5 (like in the code above). Why is that?

Each channel of the color array needs to be a number between 0 and 1. Gray translates to exactly 0.5, which is then manipulated by the wiggle to move 0.5 steps in each direction, which keeps our number in the full spectrum.
That being said I encourage you to experiment with different values and see what happens!

More powerful than you think

By default, loopOut() just works, as long as your property have some keyframes.

loopOut();

‍

But let's explore some more interesting options this function gives us:

loopOut("pingpong");

‍

Pingpong will literally play your animation back and forth, So if you have a rotation keyframe with the value of 0 and another one with the value 360, using ping pong will animate between 360 and 0, then between 0 and 360, then between 360 and 0 again and so on, like a ping-pong game.

loopOut("offset");

Offset loops your keyframed animation without resetting it. This can be a little trippy so let’s start with an example:
You can keyframe a ball jumping down a single stair, then loopOut(“offset”) will make it keep going down the rest of the stairs, forever (assuming the distance between those stairs are equal).

Think of it this way: If you have a point A and a point B, a normal loopOut() would simply repeat the motion from point A to point B forever. With offset, once it reaches point B, instead of starting over it will keep going from point B to a new point, point C. Where is point C? It is where point B is to point A. The motion is adding up onto itself.

loopOut(“continue”);

Continue is funny, it behaves like shooting an object into space. Once in space, the object does not accelerate or decelerate anymore, it uses its previous momentum to keep going at the same speed.
Continue continues at the very same speed the animation ends in. It will sample the velocity right before the last keyframe and keep your animation going at that same speed forever.

There is more to loop expressions, but these are the basics.

Limitations

Loop out does not work on path keyframes.

Placing a layer exactly at the center

Try setting a layer's anchor point to its center, then apply this expression to the Position property:

[thisComp.width,thisComp.height] * 0.5;

That's right, dead center baby! Have you ever seen something placed truly in the center? But in the perfect, true center?

Now you can go to your comp's settings and change your comp size. Your layer's position will update to be exactly at the center using the new comp dimensions.

By the way, wondering what the square brackets are for? Look at your position property. It expects both an X and a Y (not to mention Z, but that's a story for another day...).
Your job is to give it back a value with a similar layout, both an X and a Y. [x, y].

‍

Posterize the expression result

Write any additional code underneath your posterizeTime() statement, like so:

posterizeTime(12);
time * 36;

Before:

After:

Because posterizeTime() expects a number, we can even use the pickwhip tool to use a slider value as the new fps.

Posterize time the original value

posterizeTime(12);
value

‍

‍

‍

Snapping Position (or other 2 dimensional properties)

// properties you can edit
var stepSize = 20; // Will stick to 20 pixels incremenets

// run
var x = Math.round(value[0] / stepSize) * stepSize;
var y = Math.round(value[1] / stepSize) * stepSize;
[x, y];

‍

Snapping Rotation (or other 1 dimensional properties)

// properties you can edit
var stepSize = 20;

// run
var result = Math.round(value / stepSize) * stepSize;
result;

‍

Bonus: Creating a snap function that can be applied to both kinds of properties

function snap(theValue, theStepSize) {
	
	if (Array.isArray(theValue)) {
		// if the value is an array (like a Position value) apply to each dimension
		var result = [];
		for (var i=0; i<theValue.length; i++) {
				result.push(Math.round(theValue[i] / theStepSize) * theStepSize);
		}
		return result
	}
	
	// otherwise, apply to the value
	return Math.round(theValue / theStepSize) * theStepSize;
	
};

snap(value, 20);

In this example we created a function that snaps a value to a specific increment just like before.
Additionaly, we can use the power of JavaScript to automatically check if the value given to the function is an array, and if it is to snap each value independently and return the result as an array as well.

Lock a point inside a rectangle

What's lovely about the clamp() function is that it also accepts arrays. This lets us clamp points in space! For example, if we wanted to make sure our layer can't leave the canvas we can apply the following expression to its Position property:

clamp(value, [0,0], [thisComp.width,thisComp.height]);

‍

That's pretty cool! In order to describe a two-dimensional range we only need two points, the minimum and the maximum.
In this case we specify the top-left corner of the comp ([0,0]) and the bottom-right one (thisComp.width, thisComp.height).

You can modify these values to lock the Position inside any rectangular surface in and outside the view.

‍

Clamp rotation and other one dimensional values

To clamp single-dimensional values to a range simply specify the value and the desired minimum and maximum.

clamp(value, -20, 20);

Rotate by index

Let's tell the layer to rotate based on its index. We're gonna multiply the index by however many degrees we want to spin each layer. Let's use 36 degrees for now, like so:

thisLayer.index * 36

Now select and layer duplicate it (Cmd + D \ Ctrl + D) a bunch of times and behold:

How cool is that?

Why did we use 36 degrees?

In order to finish one rotation lap, we need 360 degrees. Multiplying 36 by the layer index will get us to 360 by the 10th layer.
You can use however many degrees you want.

Using a slider.

Let's do the exact same thing, but instead of hard coding a number of degrees, we're gonna use a slider to set it later on.
We're going to create a new null (Layer -> New -> Null Object) and add a slider to it (Effect->Expression Controls -> Slider Control).

Now we can duplicate our layer a bunch of times. You might notice that nothing seems to happen, but that's okay.
That's probably because your slider's value is set to 0, which results in all rotations being 0.
Play around with the slider and behold:

This method is cool, however, it can be unreliable at times, as the index of the layer can change as you design your comp.
You rarely think about the index of a layer in any meaningful way when working with After-Effects, because reordering layers in the timeline dictates the order in which layers are stacked upon each other.
You can try messing this constellation up by creating a new layer that does not have this expression already, and move it up and down in the timeline.
See how some copies disappear?

Also, if you want to make a change to this expression you would have to do this 9 times, or at least once, and then copy it over to all the other layers.
Programming wise these are not good habits, but within the After-Effects environment sometimes there is no choice but to use a layer's index in an expression.

The layer index is great! Just...messy at times.

Using the value of an existing Text Layer

All we need to do is to remap time to the number of letters in our text. Apply the following expression to a Text Layer "Source Text" property

// properties you can change
var startAt = 0; 
var endAt = 9;

// trim the text
var maxLetters = Math.floor(linear(time, startAt, endAt, 0, value.length)); // number
var result = value.substring(0, maxLetters); // trim 
result

‍

From global time to layer time

The effects seem to work just fine. However. the range we set with startAt and endAt is referring to the global comp time and ignores the layer start time. If the layer starts / ends outside the range we set in the expression head, you might not see the effect because it's taking place when the layer is not visible.
To fix this we can use "inPoint" in our expression to make up for the difference, like so:

// properties you can change
var startAt = 0; 
var endAt = 10;

// trim the text
var maxLetters = Math.floor(linear(time, inPoint + startAt, inPoint + endAt, 0, value.length)); // number
var result = value.substring(0, maxLetters); // trim 
result

inPoint is the time in seconds in which the layers start in the timeline. Adding it to our range will make the range relative to the layer itself. COOL!

‍

Rotation

Apply this code to a Rotation property:

 45 * Math.sin(Math.PI * 2  * time) // gets a number between 0 and 1, then multiplies it by 45 degrees;

‍

With a single line of code, we got your layer to rotate 45 degrees back and forth every second. How cool is that?

We are multiplying 2PI with the current time.
When the time is 0 seconds, we are 0 laps into our sine wave. When time is 1 second, we are 1 exactly one lap into our sine wave. And this goes on forever.
This helped us get a number that fluctuates between 0 and 1 repeatedly. We then multiplied it by 45 and got a number between -45 and 45. That's awesome!
The Rotation property expects a number, and a number between -45 and 45 is a number, so we did a good job on that!

For our final expression, we can do something like this:

var loopDuration = 5; // every 5 seconds, or however many seconds you decide
var degrees = 45; // or however many degrees you want
degrees * Math.sin(  Math.PI * 2  * time / loopDuration);

Now we can easily change the value of"loopDuration" in order to determine the duration of one, full lap. This makes for an easy and comfortable sine wave experience!

Position

Coming Soon...

‍

The Basics

To blend between 2 items, we need three things:
1. To specify how much we want to blend
2. The first item
3. The second item

Comfortably enough, linear and ease expect you to give them exactly that.

linear(t, itemA, itemB)

Let's have a look at some examples:

Blend between two numbers

Let's try to interpolate between two numbers. Apply this expression to a Rotation property.

linear(0.5, 200, 400) // Result: 300

We are asking linear() to give us the number that is exactly halfway (0.5) between 200, and 400. You guessed it, the result is 300!

‍

Using a Slider as the amount

Because t expects a number between 0 and 1, we can easily use a slider to control it.
We're gonna add a slider to our layer by going to Effect -> Expression Controls -> Slider Control.
Now, let's change our Rotation expression a little bit

var slider = // pickwhip to your slider
linear(slider * 0.01, 200, 400);

Now we can use our slider to blend between 200 and 400:

You might have noticed that we are multiplying the slider value by 0.01. Now, why is that?
Well, linear and ease expect a number between 0 and 1 as the amount, and our slider can easily go beyond this range.
Multiplying the slider value by 0.01 lets us change the slider more comfortably between 0 and 100, instead of 0 and 1.

‍

Blend between two points

linear and ease are powerful, as they can blend between arrays of numbers.
Let's apply the following expression to a Position property:

linear(0.5, [0,0], [500,500]); // Result: [250,250]

We are asking linear() to give us back a point that is halfway between [0,0] and [500,500]. The result is [250,250].
What happens if you add two Null Objects (layer -> new -> Null Object) and set pointA and pointB to their positions?

‍
We can now move each of our nulls around in space, and our layer will stay directly in-between them.
We can also change the t value from 0.5 to any number between 0 and 1 to place our layer in a different spot in-between our nulls. Cool!

‍

Blend Between Colors

linear and ease work on multi-dimensional arrays, which means we can interpolate between colors!

var slider = // pickwhip to your slider
var red = [1,0,0,0];
var blue = [0,0,1,0];
linear(slider * 0.01,red,blue)

(Don't forget to Pickwhip to your slider like in the slider example above).
Now we quickly created a slider that lets us blend between red and blue.

What's cool about these kinds of rigs is that we converted a number (0 - 100) to a color ([x,x,x,x]).
What other numbers do you know? Is "time" a number? How about a Rotation value? Can you make a layer change its color based on its Rotation? How cool would that be?

‍

‍

Remapping the range (advanced)

linear() is very powerful right out of the box, but it also has some hidden superpowers.
To find out about it, let's start with a problem.
Let's say we want to use time itself as the t value. Apply this expression to a Rotation property:

linear(time, 0, 360);

It works, but it works only when the current time is somewhere between 0 and 1. Then, we have 9 seconds of complete and utter nothingness.
We know that linear() expects a t value between 0 and 1, like a percentage almost. But what if we could change that?
What if we wanted our animation to be driven by time but between a different range, something like 3 and 8 seconds.

We can do it like so:

linear(t, rangeA, rangeB, itemA, itemB)

As it turns out, by squeezing two additional values in-between t and our items, we can define a range in which t will perform in.

Now if we apply the following expression to our Rotation property:

linear(time, 3, 8, 0, 360)

Our transition between 0 and 360 degrees will occur as t progresses between 3 and 8 seconds. How cool is that?

‍

linear() vs ease()

linear() lets you blend between two items an amount specified by the t value.
With ease() the same concepts apply, but t is modified behind the scenes to smoothly interpolate between 0 and 1. If that's not clear, let's compare the two:

linear(time, 0, 10, 0, 360);
ease(time, 0, 10, 0, 360);

linear result:

ease result:

Comparing the two, it's easy to see the difference. ease is biased and blends using a secret curve to simulate an easing effect.

Creating a delay between layers

In this example, there is no need to parent the layer itself to the main one. We're going to use an expression to grab its Position value.
However, instead of using "value", we're gonna use "valueAtTime()", and instead of specifying a time in seconds, we're gonna use the current time and subtract the amount of delay we want (in seconds).

var delay = 0.2; // seconds
var parentPosition = // parent to the other layer's Position property

parentPosition.valueAtTime(time - delay)

For the "parentPosition" variable value, use the Pickwhip tool to select the parent's Position property, like so:

And we're done! Any change in Position the parent layer will perform, our child layer will perform as well but with a 0.2 seconds delay. How cool is that?

‍

What is this long expression? What is going on there?

To create a looping wiggle we are blending between two symmetrical versions of the wiggle() function, using the linear() function.
This lets us end up exactly where we started, then repeat.

Creating our own function

Another cool thing we can do is to convert this code into a function and give it a name that's easy to understand.

function loopingWiggle(frequency, amplitude, loopDuration){
	var t = time % loopDuration;
	var wiggle1 = wiggle(frequency, amplitude, 1, 0.5, t);
	var wiggle2 = wiggle(frequency, amplitude, 1, 0.5, t - loopDuration);
	return linear(t, 0,  loopDuration, wiggle1, wiggle2)
};

Notice that pasting this into After-Effects will result in an error. Why?
That's because functions are like templates, they are sitting there and waiting for us to use them.

Think about the original wiggle expression, somewhere behind the scenes there is a function called wiggle, waiting for you to use it.
We created a very similar function called "loopinWiggle" which takes the same two parameters "wiggle" takes (frequency and amplitude) but then also takes a third parameter, the duration of the loop.
We call it in a similar way we call wiggle, at the end of our code.
Our final expression should look like this:

function loopingWiggle(frequency, amplitude, loopDuration){
	var t = time % loopDuration;
	var wiggle1 = wiggle(frequency, amplitude, 1, 0.5, t);
	var wiggle2 = wiggle(frequency, amplitude, 1, 0.5, t - loopDuration);
	return linear(t, 0,  loopDuration, wiggle1, wiggle2)
};

loopingWiggle(2,5,10); // calling the function

Why a function?

Creating your own functions helps you better understand that expressions in After-Effects are not some random magic.
Now we know that the original wiggle() expression is a function itself.
You don't see its source code because it's built into After-Effects, but it's there, somebody wrote it and it's waiting for you to call it.
You can do the same with functions you make on your own, and that's simply really cool!
Learn more about Functions
‍

Moving in a Circle

Apply this code to a Position property:

 // properties you can easily change
var loopDuration = 5;
var circleRadius = 25;
var flip = false;

// move
var flipper = flip ? 1 : -1;
var waveLogic = time * 2 * Math.PI / loopDuration * flipper;
var x =  Math.sin(waveLogic) * circleRadius;
var y =  Math.cos(waveLogic) * circleRadius;
value + [x,y];

‍

‍

So what are we doing here?

We are using the power of sine waves and cosine waves to create a looping, back and forth motion for each dimension.
We then multiply the result by the desired circle radius and add them to the original pre-expression value.

‍

‍

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.

‍

Removing keyframes transition (simulating "hold" keyframes)

Let's say we want to temporarily remove the transition between your keyframes. You could right-click your keyframes and choose "Toggle Hold Keyframes" which will do just that, but this method is destructive and you can lose your previous easing data that way.

To get around this issue we can simulate the same effect using an expression, by finding the last keyframe and sticking to its value.

var nearest = nearestKey(time); // get the key closest to the current time
var isInThePast = nearest.time <= time; // ask: is it in the past? true / false
isInThePast ? nearest : key(nearest.index-1); // if it is use it, otherwise get the one before it

Now we can remove / disable the expression in case we want to go back to our original keyframe data.
‍

‍

‍

Remapping time to degrees

Our timeline here on the website runs from 0 to 10 seconds. If we use the keyword time, we can get a number between 0 and 10 at any given moment.
If we wanted to remap this value into a new range we can use linear to do so.
In this case, we will remap 0 -> 10 into something we can use as degrees, like -90 -> 90

linear(time, 0, 10, -90, 90);

All it does is some math in the background to make sure any value between 0 and 10 will be "stretched" to the new range.

‍

Remapping and Converting

Remapping time to a color

linear lets us remap and convert from numbers to arrays. Let's again remap time, but this time to color.

linear(time, 0, 10, [0,0,0,0] , [1,1,1,1]);

Colors in After-Effects expressions are usually specified in normalized RGBA.
[0,0,0,1] is Black, [1,1,1,1] is white. Because both are arrays of the same size, linear will blend between them. The result is a smooth transition between black and white across time.

‍

Remapping time to points in space

You might notice a pattern with this one. Points in space are arrays as well, just like colors. There is no real difference in the way linear treats those.
Points can be either 2D or 3D, which means arrays of size 2 or 3. Let's go with 2D points:

linear(time, 0, 10, [0,0] , [20,20]);

Creating a Square

var thePoints = [ [0,0], [100,0], [100,100], [0, 100] ];
createPath(thePoints);

Dynamic Square

var r = 400;
var thePoints = [ [0,0], [r,0], [r,r], [0, r] ];
createPath(thePoints);

Opening the square

var r = 400;
var thePoints = [ [0,0], [r,0], [r,r], [0, r] ];
createPath(thePoints, [], [], false);

‍

Tangents

var thePoints = [ [0,0], [300,300] ];
var InHandles = [ [800,-800], [600,700] ];
var OutHandles = [ [-600,700], [-500,-100] ];
createPath(thePoints, InHandles, OutHandles);

‍

Creating a circle without tangents

createPath() gives us an inconceivable amount of power.
One thing we can do is use Math.sin() and Math.cos() to create a circle.
You can read more about the relationship between those functions and a circle here, but in the meantime let's just apply this expression to our path:

// Properties you can easily change
var segments = 50;
var theRadius = 250;
var finalPoints = [];


// Create the circle
for (var i=0; i<segments; i++) {
	var progress = i /segments;
	var x = Math.sin(progress * Math.PI * 2);
	var y = Math.cos(progress * Math.PI * 2);
	var finalPoint = [x,y] * theRadius;
	finalPoints.push(finalPoint);
}

createPath(finalPoints);

How did we do that?
We are using a for loop to run a block of code multiple times. Each time we are calculating the position of the new point using Math.sin() and Math.cos(), and push it to an array of points.
Finally, we give this array of points to the createPath() function, which creates the circle.
It's a cool method although somewhat expensive. In order to get a smooth circle, you'd have to crank the number of segments to a pretty high value.
But hey! It works.

‍

Feeling overwhelmed?

createPath() is not beginners friendly and that's because we are working with a lot of data here.
Going by the same "pen-tool logic", every point has two tangents.
createPath() takes the points, the in-tangents and the out-tangents in 3 separate arrays.

The syntax could be quite scary though. An array of arrays? That's a whole lot of square brackets.
Each point is an array by itself [x,y]. An array of points would look something like [ [x1,y1] , [x2,y2] , [x1,y2] ].

If that's not enough, it's important to know that tangents are calculated in a different space than points.
What does that mean? It means that a tangent at [0,0] would not actually be placed at [0,0], but it would be placed exactly on top of the point it belongs to.
That makes each tangent relative to its point.

None of what we are talking about here is beginners friendly, so don't let this get you down. Try following the examples above to get a more practical sense of how to use it instead of trying to figure the barebones of it if you have no intention to start creating complex path expressions as I did with shpr.

function loopOutPath(){
  if (numKeys > 1 && time > key(numKeys).time){
	  var sTime = key(1).time;
	  var eTime = key(numKeys).time;
	  var loopEvery = eTime - sTime;
	  var delta = time - eTime;
	  var finalTime = sTime + (delta%loopEvery);
	  return valueAtTime(finalTime);
   }else {
		 return value
	}
}

loopOutPath();

‍

Create a function that multiplies a number by 2

this function takes a number and multiplies it by 2.

function multiplyByFucking2(input){
	return input * 2
}

// It won't run, unless we call it
multiplyByFucking2(10); // result: 20
multiplyByFucking2(5); // result: 10
multiplyByFucking2(30); // result: 60

Create a function that gets the comp center

This function gets the comp size and multiplies it by half.

function getTheFuckingCompCenter(){
	return [thisComp.width, thisComp.height] * 0.5;
}

// It won't run, unless we call it
getTheFuckingCompCenter(); // result in a 1080p comp: [960,540]

Check if keyframes exist

// this function will check if keyframes exist using the numKeys variable built into After-Effects. If the number of keys is bigger than 0, the answer is true.

function hasFuckingKeyframes(){
	return numKeys > 0
};

// It won't run, unless we call it
hasFuckingKeyframes(); // result: true or false

Here's a fun idea, let's use this function we have created to fix the built-in loopOut() function.
Using loopOut() will throw an error if keyframes don't exist. But now we can use our new function to check if keyframes exist before we use loopOut() at all.

 if ( hasFuckingKeyframes() ) {
	loopOut()
} else {
	value
}

Or in an even shorter form:

hasFuckingKeyframes() ? loopOut() : value;

Check if something is in view

if either dimension is smaller than 0 or bigger than its corresponding comp dimensions, it's outside the view.

function isInView(x,y) {
	// if x is outside the answer is false
	if (x < 0 || x > width) { return false }

	// if y is outside the answer is false
	if (y < 0 || y > height) {return false }

	// otherwise, the answer is true, it's in view
	return true
};

// It won't run, unless we call it
isInView(0, 20) // result: true or false, depends on the comp size

‍

‍

‍