The Expressions Cheat Sheet
Loading...

After-Effects offers some great functions to blend between two values. The main two are:

linear();
ease();

What's great about those functions is that they offer very extensive functionality for advanced users, but also give you the option to keep things simple. Let's start with simple :)

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.