In some situations, you may need to incorporate an animation into an expression to reduce the use of keyframes. You can achieve this with the Ease Expression, a surprisingly simple and versatile expression.
The Ease Expression allows you to change the value of a property to a different value over a specified duration of time. While it has its limitations, it can be extremely handy for templates, automated adjustments, or any other layer that you don’t want to apply keyframes to. Additionally, it allows you to control the timing of an animation with an expression control, such as a Slider.
Structure
The basic structure of the Ease Expression is as follows:
ease(time,inPoint+c,inPoint+d,[a],[b]);
For our example, we just used the variables a, b, c, d as placeholders to identify the custom values you will input depending on your situation. Now let’s break this down and see at what each part of the expression means:
ease
This term establishes the type of animation curve you will be using. There are three types of Ease animations: Ease, EaseIn, and EaseOut. Depending on your experience, you may already be familiar with these.
EaseOut will gradually slow the animation speed as it progresses. EaseIn will gradually speed up the animation as it progresses. Ease will combines the two by starting and ending slow and reaching its peak speed at the middle of the animation. One of the flaws of this expression is its inability to apply more complex animation curves via the graph editor. However, in most cases, one of these preset curves should look great.
EaseIn
EaseOut
time
This sets your expression within the context of your composition’s time. Therefore, all of the values within your expression will be in terms of seconds. You generally needn’t apply any adjustments to this portion of the expression, though you can modify it if you’d like to multiply or divide the speed of your entire animation. (e.g. ‘time*2,’ ‘time/2’).
inPoint+c and inPoint+d
Your inPoints indicate the start and end time of your animation, with inPoint+c representing the start and inPoint+d representing the end. In our example, d – c represents the length of your animation. So, for instance, inPoint+2,inPoint+5 would start the animation at two seconds in, and end at five seconds in, for a total of a three-second animation.
By not adding a value to your first inPoint, you will set your animation to start at the beginning of the Timeline by default.
[a] & [b]
[a] represents your starting value, and [b] represents your ending value. Therefore, at inPoint+c your layer property’s value would be [a]. At inPoint+d your layer property’s value would be [b]. For 2D and 3D layer properties, you can simply replace your single [a] and [b] values with the appropriate arrays instead. See our article on arrays for more information on how to apply them.
Application
Now that you understand the basic structure of how the expression works, here’s how to actually apply it.
ease(time,inPoint+1,inPoint+3,[0],[360]);
This simple example above, if applied to a layer’s rotation, would execute a 360-degree clockwise rotation (a negative [b] value would indicate counterclockwise) that starts at one second and ends at three seconds.
ease(time,inPoint+5,inPoint+9,[960,540],[400,360]);
This array example, when applied to position (a 2D property), would cause the layer to move from the coordinates [960,540] to the coordinates [400,360], starting at five seconds and ending at nine seconds.
Examples
Now let’s go over a few more complex examples to take this expression to the next level.
1. Expression Controllers
x = comp(“Scene Options”).layer(“Scene Options”).effect(“Slider Control 01”)(“Slider”);
easeIn(time,inPoint+1,inPoint+1+x,[0,0],[100,100]);
This expression, if applied to scale, would allow the user to adjust the duration of the animation using a Slider Control. The Slider Control value would directly translate into seconds, so if the Slider Control was set at 5.5, the animation would be 5.5 seconds long. This would increase from a uniform scale of 0 to a uniform scale of 100. Also note the use of EaseIn, which would cause the animation to slow as it approaches the end.
- 1.1 Expression Controllers
x = comp(“Scene Options”).layer(“Scene Options”).effect(“Slider Control 01”)(“Slider”);
y = comp(“Scene Options”).layer(“Scene Options”).effect(“Slider Control 02”)(“Slider”);
easeOut(time,inPoint+x,inPoint+y,[0,0],[100,100]);
This similar expression would instead allow the user to adjust the starting point and ending point of the animation via two Slider Controls. This time we used EaseOut, meaning the animation would start slow, gradually speeding up over time.
- 1.2 Expression Controllers
As you can see, you can replace any numeric value with the value of an expression controller. Everything from timing to beginning and end values can be customized remotely, or automated according to the settings of another layer. You can even apply this technique to colors! For instance:
c1 = comp(“Scene Options”).layer(“Scene Options”).effect(“Color Control 01”)(“Color”);
c2 = comp(“Scene Options”).layer(“Scene Options”).effect(“Color Control 02”)(“Color”);
ease(time,inPoint+1,inPoint+4,[c1],[c2]);
If applied to any color property, like the Fill effect for instance, this would create a three-second fade from one chosen color to the next.
2. Multiple Animations
Say you want a layer to change values more than once. Simply add multiple versions of your expression together in the same line — though it’s not quite that simple.
ease(time,inPoint+2,inPoint+4,[10],[50]) + ease(time,inPoint+6,inPoint+9,[0],[-70]);
When applied to rotation, this would cause the layer to start at 10 degrees, and rotate to 50 degrees over the course of two seconds, starting at the two-second mark on the Timeline. Then it would initiate the second animation six seconds in, decreasing back to -20 degrees over the course of three seconds. You should keep in mind the fact that all of your Ease Expression segments after the first perform slightly differently than it.
While you might logically expect the expression to look like this, respecting the value of the first ease expression:
ease(time,inPoint,inPoint+6,[10],[50]) + ease(time,inPoint+10,inPoint+13,[50],[-20]);
This is actually not necessarily the case. What we identified as your [a] and [b] values (in this case, [50] and [120]) earlier actually don’t matter individually for secondary versions of this expression. What matters is the difference between them. Both versions of this secondary expression subtract the value by 70. However, regardless of what the secondary [a] value is, the animation will always start with whatever the current value is.
This concept gets a bit wordy, so here’s another example to further help you understand:
ease(time,inPoint,inPoint+6,[0],[130]) + ease(time,inPoint+10,inPoint+13,[0],[20]);
This would cause the layer to rotate from 0 degrees to 130 during the first six seconds, and rotate from 130 to 150 starting at the ten-second mark.
This underrated expression has a variety of uses to improve your workflow, and has personally allowed me to create customizable template attributes that were otherwise impossible or needlessly complex.