3 Timeless 'Principles of Animation' That Will Add Life to Your AE Projects

On my coffee table lays a book I keep coming back to called The Illusion of Life: Disney Animation. Pragmatic and full of examples, The Illusion of Life

reveals the discoveries and techniques of early Disney animators and has appropriately been called the "bible of animation."

This weekend I did a practice exercises in After Effects to experiment with some of the principles outlined in the book and it served as an important reminder of how following a few simple guidelines can make a movement in an animation more engaging and professional.

Here's my practice:

1) Squash and Stretch

By far the most important discovery was what we call Squash and Stretch...Anything composed of living flesh, no matter how bony, will show considerable movement within its shape in progressing through an action. The squashed position can depict the form either flattened out by great pressure or bunched up and pushed together. The stretched position always shows the same form in the very extended condition (48).

Squash and stretch can add a lot of charm to an otherwise rigid animation, but take caution not to have your animations come off as deformed. Avoid having your subject appear to grow or shrink in volume (49). Think of it like putty: you can manipulate the distribution of a fixed amount of putty, but don't add or take away from the total amount.

2) Anticipation

People in the audience watching an animated scene will not be able to understand the events on the screen unless there is a planned sequence of actions that leads them clearly from one activity to the next. They must be prepared for the next movement and expect it before it actually occurs. This is achieved by preceding each major action with a specific move that anticipates for the audience what is about to happen (52).

A good way to do this is to subtly have your subject in engage in the opposite of its main action right before the main action occurs. The overshoot practice does this by moving slightly to the left before it moves to the right, and the bounce does this by squashing horizontally before stretching vertically. These are subtle but it made the actions feel more complete.

3) Follow-through

Things don't stop all at once...first there's one part and then another (p 59).

A couple powerful expressions give the two types of follow-through used in this practice - overshoot and bounce - a natural feel. These can also be accomplished with the graph editor or by keyframing in After Effects.
 

Overshoot expression (from motionscript.com)

freq = 3; decay = 5; n = 0;
if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time) n--; } if (n > 0){ t = time - key(n).time; amp = velocityAtTime(key(n).time - .001); w = freq*Math.PI*2;
value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w); }else value

Bounce expression (from motionscript.com)

e = .7; g = 5000; nMax = 9; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time) n--; } if (n > 0){ t = time - key(n).time; v = -velocityAtTime(key(n).time - .001)*e; vl = length(v); if (value instanceof Array){ vu = (vl > 0) ? normalize(v) : [0,0,0]; }else{ vu = (v < 0) ? -1 : 1; } tCur = 0; segDur = 2*vl/g; tNext = segDur; nb = 1; // number of bounces while (tNext < t && nb <= nMax){ vl *= e; segDur *= e; tCur = tNext; tNext += segDur; nb++ } if(nb <= nMax){ delta = t - tCur; value + vu*delta*(vl - g*delta/2); }else{ value } }else value

Reference and Image Credits: Thomas, Frank; Ollie Johnston (1981, reprint 1997). The Illusion of Life: Disney Animation. Hyperion. pp. 47–69. ISBN 978-0-7868-6070-8.