Despite a lot of efforts made to facilitate animation with computer technology, many artists struggle to produce compelling works in the field. Our previous post on the topic revealed that brilliant animation is all about sticking to the very basics. Adhering to the laws of physics is how you begin, but what about more abstract issues, such as emotional timing and character appeal?

In 1981 two bright Disney animators Ollie Johnston and Frank Thomas introduced twelve basic principles of animation to produce more realistic works. Since then the principles have been adopted by almost every professional animator, and have been referred to by some as the “Bible of animation.” Originally intended to apply to traditional, hand-drawn animation, the principles still have great relevance for today’s computer animation and can be found not only in character animation but also in user experience design. Twelve basic principles of animation below are paraphrased from The Illusion of Life: Disney Animation, one of the “best animation books of all time,” and illustrated with examples made using Animatron.

Squash and Stretch

Considered the most important principle, “squash and stretch” gives a sense of weight and volume to drawn objects. It is best described with a bouncing ball, which appears stretched when falling and squashed when it hits the ground. Even slightly exaggerating on shortening and widening animated objects will give them that realistic feel.

Anticipation

Almost nothing happens suddenly. As as the action appears more realistic if the audience is given a clue of what happens next, anticipation is used to prepare for the main action of an animated scene.

Staging

Johnston and Thomas defined staging as “the presentation of any idea so that it is completely and unmistakably clear,” so as the audience’s attention is directed to what is of greatest importance in a scene. The essence of staging is keeping focus on what is relevant, eliminating unnecessary detail, and avoiding any confusion.

Straight Ahead

Action and Pose to Pose This principle matches two different approaches to the actual drawing process. One either draws out a scene frame by frame from beginning to end (“straight ahead action“) or starts with a few key frames, and then fills in the intervals (from “pose to pose“). A combination of the two techniques is often used to create dynamic and dramatic illusion of movement. Most of computer animation tools assist with the principle by automatically filling in the missing sequences in transitions between keyframes.

Follow Through and Overlapping Action

“Follow through” relates to parts of the subject that continue to move with inertia after a completed action. To achieve more realism make the same parts move at different speed with “overlapping action.” Notice how the plate moves in the example below:

Slow In and Slow Out

Or sometimes addressed as “ease in and ease out” the principle suggests that almost every movement needs time to accelerate and slow down. Your animation will look realistic if more drawings are added to the beginning and end of an action, emphasizing gradual speed up and slow down, and fewer in the middle.

Psst! Easing functions applied between keyframes in Animatron can handle this principle very well, be sure to check them out in our Knowledge Base!

Arc

Arcs increase the realism of the subject’s action, as almost all lifelike objects tend to follow curved paths rather than straight lines.

Secondary Action

Supporting the main action with secondary one adds more dimension to the character animation and gives a scene more life. The principle of staging is very important in applying the actions correctly. Make sure secondary action emphasizes the main action, rather than take attention away from it.

Timing

Referring to the number of drawings or frames for a given action, correct timing is critical for establishing a character‘s mood, emotion, and reaction. Simply put, use more frames to create slower action and less frames for faster one.

Exaggeration

The classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a wilder, more extreme form. As a perfect imitation of reality can look static and dull in cartoons, exaggeration is especially useful and livening for animation.

Solid drawing

Solid drawing considers an object following the rules of perspective in three-dimensional space. For an animator this means understanding the basics of academic drawing, anatomy, weight, balance, light, and shadow, etc. To benefit from it consider taking art classes and sketching from life even if most of your work is computer-assisted.

Appeal

Last but not least, appeal reflects compelling attractiveness or charm that can inspire devotion in others. The important thing is that the viewer feels your character not necessarily sympathetic, but always real and interesting.

Apply these principles alone or combined with your work and let us know how it has improved. Complement a set of twelve basic principles of animation with 6 Basics to Brilliant Animation from Bryce Struck.

Most of the content used to illustrate the article can be found in Animatron’s free Marketplace. Start exploring and creating!

START CREATING