12 Principles of Motion Design
In 1981 Disney animators Ollie Johnston and Frank Thomas created the 12 principles of animation in their book - The Illusion of life: Disney Animation. While we don't draw animation cells by hand anymore, the basic principles of motion design are still the same.
Creating visually appealing animations with motion graphics requires a basic understanding of the principles of motion design. These 12 motion principles have become the gold standard for animation techniques. If you are a motion graphics designer you should learn to recognize and understand these motion principles and when they should be applied.
- Squash and stretch
- Anticipation
- Staging
- Straight-ahead action and pose-to-pose
- Follow through and overlapping action
- Slow in and slow out
- Arc
- Secondary action
- Timing
- Exaggeration
- Solid drawing
- Appeal
1. Squash and stretch
Squash and stretch are the foundations of animation. To create the illusion of mass, weight, and gravity – think about how objects move and flex. As objects collide they squash and stretch. This gives life to an object. In order for it to look realistic, it’s important to keep the mass and volume consistent. So a stretch gets thinner while a squash gets wider.
2. Anticipation
Wait for it… Anticipation is the before action. Before you make a movement your body adjusts to create that movement. Animated object may want to move in the opposite direction or recoil a bit before launching into action.
3. Staging
Use motion to emphasize what is important in the scene. Staging the composition to draw the focus on the action and keep the motion of the other elements to a minimum. This is a classic technique for film as well. Pay attention to layering. Adding small secondary animation to the main object could help that element stand out.
4. Straight ahead action and pose to pose
Straight ahead animation is the way to describe an animation process of drawing each frame in succession frame-by-frame from start to finish. Pose to pose animation refers to a start, middle, and end frame with between frames added later. In modern terms, we refer to this as keyframing and it’s the way most animation software works.
5. Follow through and overlapping action
Remember objects have mass and weight. Not everything moves at the same rate. Different parts of the object may move at different times or intervals. This secondary animation is the overlapping action. Similarly, all the parts don’t just start and stop moving at once. There may follow through motion on some or all of the objects as they come to rest.
6. Slow in and slow out
Combing all the previous elements of stretch, anticipation, and follow-through add up to an object’s momentum. Adding more or less time before and after keyframes makes a slow or quick start / stop action and looks more natural. Today we call this easing and can control this timing precisely in the properties of the keyframe.
7. Arc
Thinking again about how gravity affects objects, it’s best to apply some physics to your animations. Most objects move in some kind of arc path thanks to gravity. Straight lines are for squares (pun intended).
8. Secondary Action
Adding secondary actions can be used to support or emphasize the main action. Small subtle movements help add dimension and character to your objects. Just be sure these secondary animations are small enough not to distract from the primary movements.
9. Timing
Using mass, gravity, physics, and easing are all about making smooth natural-looking movements. Using the correct and consistent timing for objects to create a consistent pace is the key to a cohesive animation.
10. Exaggeration
All of these realistic movements are great, but could also end up being boring. Sometimes a little exaggeration is called for. Add some exaggeration to your objects to make them more dynamic. Bring the motion to life, have some fun.
11. Solid Drawing
This principle of motion design is not really about motion design. Understand 3d space to further the expression of weight and volume. Use light and shadows to create perspective in your 3d animated world.
11. Appeal
Finally, your motion graphics should appeal to the viewer. This is probably self-explanatory, but if your animation doesn’t look good – nobody will want to watch it. When done right, the motion designer should combine all these principles into a fun, dynamic, and appealing animation.
