Easing Expressions in After Effects

Table of Contents

Author’s Note
Revisions
Simplified Methodology

Author’s Note

The paper below was written last year, from more or less a stream of consciousness over the course of a week or two. Technically, it is still unfinished; there are some errors, concepts that could be better explained, and suboptimal notation. Despite this, I decided to post it anyways since it contained some interesting ideas.

Since then, I have improved my skills and understanding in After Effects regarding expressions and sliders. Below the paper are corrections I want to make, followed up with an actual, practical, methodology.

Revisions

Cubic Ease Formula

The cubic formula can be greatly simplified. I failed to realize that $c_2=\frac{1}{2}a^2 – \frac{a+b}{2}a = -\frac{ab}{2}$ .

Next, solving for $c_3$ is unnecessary, since normalizing will set the output range to $0≤f_u(t)≤1$ .

f_u(t) = \frac{f(t)-f(a)}{f(b)-f(a)}

f_u(t) = \frac{\left(-\frac{t^{3}}{6}+\frac{a+b}{4}t^{2}-\frac{ab}{2}t\right)-\left(\frac{a^{3}}{12}-\frac{a^{2}b}{4}\right)}{\left(\frac{b^{3}}{12}-\frac{ab^{2}}{4}\right)-\left(\frac{a^{3}}{12}-\frac{a^{2}b}{4}\right)}

Simplify.

f_u(t) = \frac{-2t^3+3(a+b)t^2-(6ab)t – a^3+3a^2b}{b^3-3ab^2-a^3+3a^2b}

f_u(t) = \frac{-2t^3+3(a+b)t^2-(6ab)t – a^3+3a^2b}{(b-a)^3}

This is the final cubic ease equation given start time $a$ and end time $b$ .

The following is “new” material, better outlined the Simplified Methodology section. If we first normalize time via $u(t) = \frac{t-a}{b-a}$ , then the burden of restraining values $0≤f_u(t)≤1$ is heavily lifted from the cubic. Essentially, this locks in $a=0$ , and $b=1$ for the equation. (With better notation, we have: $u(t) = \frac{t-t_1}{t_2-t_1}$ , and $u(t_1)=0$ , $u(t_2)=1$ ). This collapses the cubic equation to:

f(t) = -2\left( u(t) \right)^3 + 3\left( u(t) \right)^2

Simplified Methodology

Here are the steps to the Ease equation.

Step 1: Normalize Time

Normalize time between start ( $t_1$ ) and end ( $t_2$ ). This means that $u(t_1) = 0$ , and $u(t_2) = 1$ .

u(t) = \frac{t-t_1}{t_2-t_1}, \space\space\space\space\space\space t_1≤t≤t_2

After Effects has the linear() expression to normalize. The output will also be constrained to $0≤u(t)≤1$ . This can also be achieved with a Slider Control.

t1 = key(1).time;
t2 = key(2).time;
t = linear(time, t1, t2, 0, 1);

Step 2: Choose Normalized Curve

Choose a rate of transition (linear, cosine, cubic, etc) to determine the output curve of the transition. Normalize again. Below are some examples. Note: easing is not the only application; see exponential scaling.

Linear

r(t) = u(t)

Cosine

r(t) = -\frac{1}{2} \cos\left( u(t) \pi \right) + \frac{1}{2}

Cubic

r(t) = -2\left( u(t) \right)^3 + 3\left( u(t) \right)^2

Quintic

r(t) = \frac{480}{41}\left(-\frac{1}{120}\left( u(t) \right)^{5}+\frac{1}{48}\left( u(t) \right)^{4}-\frac{3}{16}\left( u(t) \right)^{3}+\frac{25}{96}\left( u(t) \right)^{2}\right)

r(t) = -\frac{4}{41}\left( u(t) \right)^{5}+\frac{10}{41}\left( u(t) \right)^{4}-\frac{90}{41}\left( u(t) \right)^{3}+\frac{125}{41}\left( u(t) \right)^{2}

Logistic at $u'(0) = 0.05$

r(t) = \frac{1}{1+e^{-10.71576451\left(u(t)-0.5\right)}}

Step 3: Transition

Construct a linear function such that $p(r(u(t_1))) = p(0) = p_1$ and $p(r(u(t_2))) = p(1) = p_2$ .

p(t) = p_1 + \left( p_2-p_1 \right) r(t)