skip to Main Content

After Effects Expressions & JavaScript

Updated: 5 November 2018

Linear( ) returns a linear interpolation and can be used for values as well as time. When working with values, linear maps one range of values to another range of values. When working with time, linear( ) maps a range of values over time.

Expression form 1:

linear(value_source, minimum_value, maximum_value, target_value1, target_value2)

value_source is a number returned from the source identified in this part of the expression. The source can be from an expression control, layer property, the timeline, or other source.

minimum_value is the smallest value of the range of the value_source and is a number.

maximum_value is the largest value of the range of the value_source and is a number.

target_value1 is the first value of the range of numbers you want to map.  Can be a number or numerical array.

target_values2 is the second value of the range of numbers you want to map.  Can be a number or numerical array.

Expression explained:

When value_source <= minimum_value, then the expression returns target_value1. When value_source >= maximum_value, then the expression returns target_value2. Otherwise, the target_source value is use to create an interpolation of the value range. Target values can be mapped from lowest to highest, or from highest to lowest.

Returns:

A number or numerical array.

Example 1:

This is how I coded the example in the video on Linear Interpolation & the Linear( ) Expression.

I have a slider with a range of values from 0 to 9. I have two layers, each with a long rectangular shape; each shape having their anchor point set at each rectangle’s end to the animator’s left.

Screen shot of rectangle example

I want the slider to control the rotation of the rectangle in layer 1 (top, green). I have a second rectangle on layer 2 that I want to rotate at the same time the first rectangle moves, but with the rotational values of 3 through 8. If I pick whip layer 2’s rotation property to layer 1’s, it will mimic layer 1 exactly, which is not what I want. Instead, I create a variable S and gave it the value of Layer 1’s rotational property, then used linear( ) to solve the interpolation needed:

S=Pick whip the slider value here.;
R=linear(S,0,9,3,8);
R

Effect:

When the slider is set to 0 layer 1’s rotation property is 0, while layer 2’s rotation property is 3. When the slider is set to 9, layer 1’s rotation property is 9, while layer 2’s rotation property is 8.  As the slider moves from 0 to 9 the linear( ) expression calculates a smooth even movement for Layer 2 between 3 through 8 while layer 1 moves from 0 through 9.

Example 2:

As a puppet lift’s its leg, the leg hits the puppet’s skirt at a rotation of 32. The leg’s top rotation is 78.4. I animate the puppet’s skirt so it follows the leg movement, and I control this animation with a null layer that has a position range of [125,312], when the leg strikes the skirt, through [95,329], when the leg stops moving. The code placed in the null layer’s position property would look like this:

R=Pick whip to the rotation property of the leg here.;
P=linear(R,32,78.4,[125,312],[95,329]);
P

Effect:

While the math After Effects does for me is complicated, this code isn’t as bad as it first looks. In the linear expression above, R is the rotation of the leg, and so the next two numbers are the leg’s rotation range.

Because the position property of a layer has an X and Y axis, a position can be expressed as an array [X,Y]. The null layer’s position property controls the skirt animation (how it does this is not relevant to this example, like artificial gravity in a science fiction movie, let’s just agree it does it somehow). Because the Null layer’s position is a 2 value array, the starting and ending arrays can be placed in the linear expression.

The linear expression interpolates both the X and Y values base on the rotation value, making the skirt animation follow the leg movement.

Note that the [X,Y] values could have been separated, and the code would look like this:

R=Pick whip the rotation property of the leg here.;
X=linear(R,32,78.4,125,95);
Y=linear(R,32,78.4,312,329);
[X,Y]

Expression form 2:

linear(value_source, target_value1, target_value2)

value_source is a number from the source identified in this part of the expression.

target_value1 is the first value of the range of numbers you want to map. Can be a number or numerical array.

target_values2 is the second value of the range of numbers you want to map. Can be a number or numerical array.

Expression explained:

value_source, in this linear form, has a value range of 0 through 1. When value_source <= 0, then the expression returns target_value1. When value_source >=1, then the expression returns target_value2The target values can be mapped from lowest to highest, or from highest to lowest.

Returns:

A number or numerical array.

Example:

I have a slider I want it to control a door opening that is controlled by its rotation property. After I determine the best rotation range is 0 (closed) through 100 (all the way open) I place this expression in the door’s rotation property:

R=Pick whip the door's rotation property here.;
D=linear(R,0,100);
D

Effect:

Because of the form of linear( ) that I used, I set my slider value to 0 through 1. While this seems like a short numerical trip, the slider shows two decimal places in the Effects Control panel. It can actually return up to four decimal places, but if I place my cursor in the slider’s field I can bump the value up or down by 0.01 increments using the up and down arrow respectively.

When the slider is set to 0 the door’s rotation is 0, and when the slider is set to 1, the door’s rotation is 100. As the slider is moved from 0 to 1 (counting by 0.01 increments) the door’s range of 0 to 100 is interpolated so the movement is smooth. Because, in this case, there are 100 degrees in the rotation and 100 steps to 100 when counting from 0 by one-hundredths, the steps are mapped like so: 0.00 = 0; 0.01 = 1; 0.02 = 2; 0.03 = 3; 0.04 = 4; and so on).

This example used a slider and a value goal of 100 to simplify the explanation and make it easier to see what’s happening. In this situation, but it would make more sense to set the slider value to 0 through 100 and pick whip the the slider value directly to the door’s rotation property, skipping the linear( ) expression.

Further exploration:

On-site:

Linear interpolation is explained in this video: Linear interpolation & the linear expression .

Use of this expression is introduced and used often in the Controllers & Expressions Series. It appears first in the third video in the series.

Off-site:

Adobe’s Expressions Language Reference Interpolation Methods section (there are also several links to other tutorials and instructional pages in this section which are worth checking out).

I mention J J Gifford’s scripting website on donQmedia’s off-site resources, but here’s a direct link to his section on interpolation methods.

Back To Top