The Problem with Scale

Animation

Overview

Scaling between two keyframes is perceived as logarithmic to the human eye. This is most noticeable with larger values.

For example, a scaling from 100% to 200% will double the size, however a scaling from 1000% to 1100% increases the size by only a tenth. Despite both instances increasing by 100 units, we see drastically different results. Therefore, if we want to scale from 100% to 2000% using normal keyframes, we will see a slowing-down effect (orange grid).

To compensate, the scale must increase exponentially (blue grid).

Exponential Scale

Formula

s(t) = s_1 * \left( \frac{s_2}{s_1} \right) ^t , \space\space\space\space\space\space \text{for} \space 0≤t≤1

After Effects Code

t1 = key(1).time;
t2 = key(2).time;
s1 = key(1).value[0];
s2 = key(2).value[0];
t = linear(time, t1, t2, 0, 1);
s = s1 * Math.pow(s2/s1, t);
[s, s]

Exponential Scale With Ease

Add a Slider Control to the layer and keyframe the start at 0, and the end at 1. Now, ease the Slider keyframes to your liking.

After Effects Code

s1 = key(1).value[0];
s2 = key(2).value[0];
t = effect("Slider Control")("Slider");
s = s1 * Math.pow(s2/s1, t);
[s, s]

Exponential Position

Most of the time, there will be a discrepancy between the scale and the position. Therefore, the position must also grow exponentially.

However, since the position is not percentage based, its exponential path cannot be derived easily from its own keyframes to match the scale. Because of this, we take the curve directly from the scale and normalize it (line 9).

Separate dimensions before applying.

Formula

p(t) = p_1 + (p2-p1) \left( \frac{ s_1\left(\frac{s_2}{s_1}\right)^t – s_1 }{s_2- s_1} \right)

After Effects Code

p1 = key(1).value;
p2 = key(2).value;
s1 = transform.scale.key(1).value[0];
s2 = transform.scale.key(2).value[0];
s = transform.scale.value[0];
u = linear(s, s1, s2, 0, 1);
p = p1 + (p2-p1)*u;
p