We’ve all seen the work of motion designers at play – from animated logos at the end of a television commercial to rhythmically choreographed lyric videos through to character animations. These skilled artisans wield incredible tools and techniques to bring static imagery to life – and they employ 12 essential motion design principles to do just that.

In the 1980s, Disney animators and animation legends in their own right Frank Thomas and Ollie Johnston wrote the definitive, canonical work on animation. The Illusion of Life draws upon their decades of experience working under Walt Disney himself on such works as Snow White, Pinocchio, and more.

In chapter three of this foundational animation bible, Thomas and Johnston posit that there are 12 fundamental principles of animation, which have served as the backbone for animators and motion designers in all of the years since.

Those animation principles are:

1. Squash and stretch

2. Anticipation

3. Staging

4. Straight-ahead action and pose to pose

5. Follow-through and overlapping action

6. Slow in and slow out

7. Arcs

8. Secondary action

9. Timing

10. Exaggeration

11. Solid drawing

12. Appeal

While most working motion designers and animators are very familiar with these terms now, at the time, they were merely bits of jargon that started to make their way through the Disney Animation Studio. The article Applying Design Principles to Motion Design similarly introduces principles that were once novel and are now widespread. In this article, we’ll be diving into each principle to understand the terms beyond their jargon, and delve into examples of each at play. Whether you’re a seasoned motion designer looking for a motion design principles 101 refresh, or you’re new to the field and simply curious to understand the basics, read on for these fundamental principles of motion design.

Squash and Stretch

Thomas and Johnston describe this first motion design principle as “the most important discovery” within the field. Squash and stretch is the true essence of bringing any element of motion into, well, motion. When we think about a real-life context, whenever we move something from one place to another, there is a rigidity that gets emphasized by the movement. If you are exercising and you squat, for instance, your physical form literally squashes down; when you emerge back upright, you are stretched to your full form.

That real-life example applies to motion design as well. Just as we don’t lose our physical forms or experience adjustments to our overall mass when we squat or stretch, the same is true for our elements in motion. We use the principles of squash and stretch to imply movement as elements navigate through space. Initially, in the days of Thomas and Johnston, this was all done with hand illustration, drawing our characters or items on the page. Today, we can achieve these same principles digitally using apps like Fable.

Lampman’s illustration of the ‘squash and stretch’ shows how the principle is applied to a bouncing ball.

This bouncing ball example showcases just how squash and stretch works in practice. We understand even without seeing the line there that the ball has reached a hardened surface because its shape flattens in example B, just as we understand that it lifts up because of its stretched state thereafter. In example A, we have no sense of movement, and it could be perceived that these are seven separate balls just extended in space, whereas it becomes very clear the continuous motion in example B. That is squash and stretch in action.

Anticipation

Anticipation puts us in the mind of our audience, and states that in order to understand the motion graphics that are happening in front of us, we have to perceive them as a sequence of events – and we have to anticipate what is going to happen next.

As Thomas and Johnston note, “this anticipation can be as small as a change of expression or as big as the broadest physical action.” This device is of course not specific to animation; it’s been used throughout the performative arts to create drama, establish a bit, or even wield some misdirection.

Anticipation isn’t just about that small or big moment that leads to the next thing, it’s about ensuring that all of the elements in our motion graphic are acting in suit. That is to say, if we take our real life squatting example, it isn’t just about our legs bearing down, it might be that we also take a big inhale as we descend, our arms may move in accordance; all of our bodies are similarly in action as the main action is taking place (or about to take place).

Check out our Fable Academy series, Fast Fables, to create this rocket flying through space.

In this example from Fable, we see the principle of anticipation come to life.

Anticipation doesn’t need to just be applied to people. In the above example, we see the blast of our rocket build up as it launches into space. Knowing that our purple emissions are getting going (as we can see the wavy lines animate), we understand that what follows suit next is that our rocket will propel higher and higher.

Staging

Staging is a broad concept that can be applied to many artistic disciplines. Put simply, and as stated by Thomas and Johnston, “it is the presentation of any idea so that it is completely and unmistakably clear.” We stage for the purpose of being seen, known, and understood.

Staging often comes down to the intent of the overall work. If we’re looking to convey a happy mood, for instance, we might be sure to stage smiling faces in our mograph. If we want to convey that our character is in a quiet environment, we might have them tiptoe.

While staging is important in allowing us to convey an idea with strength, it’s equally important for allowing us to consider what we don’t want to do. If our intent is to show that it’s quiet like in the example stated above, we aren’t going to shield that tiptoe with another animation because we feel like it might be fun. We are going to be incredibly explicit with what we do and don’t feature in our motion design work.

Straight Ahead Action and Pose to Pose

Straight ahead action and pose to pose is a truly process-oriented animation principle. In straight ahead animation, the animator or motion designer would design each frame after the next in succession, from start to finish. In pose to pose, by contrast, the motion designer may design a few key frames, and leave it to an assistant (in the times of Thomas and Johnston) or a computer or app (in more modern times) to fill in all of the gaps.

These may feel like functionally the same thing now, particularly as we have computers to fill in many of the gaps, but that difference in process allows for some fundamental nuances in the overall look, feel, and vibe of the piece. “With Pose to Pose, there is clarity and strength. In Straight Ahead Action, there is spontaneity,” the animators write.

Follow Through and Overlapping Action

In follow-through and overlapping action, we’re looking again at the sequence of events. In the early days of motion, characters would carry on their actions and then just – stop. It was awkward and abrupt, and in its worst cases, would take the viewer out of the story. Enter in Follow through and overlapping action, which help us move continuously from one action to the next. For instance, if your character stops running, its arms and hair might still move, even though its legs have stopped. What happens after the animated movement also adds to the story. If your character stops running and its hair completely covers its face versus if it stops running and gracefully comes to a stop, we have a very different overall feel to our composition.

This jelly bean is the perfect illustration of follow through and overlapping action.

In the above example, we can see this animation principle hard at work as that jelly bean collides with the ice cream. The piece would have such a different feel if that jelly bean didn’t cascade down the delicious scoop a few inches, then also involuntarily kick its heels up as the cherry plops down on its head. Follow through and overlapping action help us achieve even the most subtle senses of energy, humor, and mood.

Slow In and Slow Out

This animation principle builds on a few of our previously discussed ideas, namely squash and stretch, anticipation, and follow through. In slow in and slow out, we use time (and by extension, more animations or frames) to manipulate the action, enhancing our focus or creating more anticipation as to what will come next.

See how the differences in pace between the moments where we are zoomed out into our galaxy to when we zoom in create a sense of anticipation.

In this example from Fable, we are using slow in and slow out – what motion designers now commonly refer to as easing in and easing out – to build to those moments at the start of the mograph. The shapes rotate around the sun in a circle before it all turns into a constellation. That rotation starts gradually and then speeds up, then decelerates rather than coming to a harsh stop. This makes the motion feel natural and realistic.

Arcs

Most natural things in the world don’t move in perfectly straight lines – up and down. The vast majority of movement takes place in arcs. In the early days of motion, animators just had their characters move up and down, side to side, and it felt markedly unnatural. This principle is cemented into the canon because it allows us to create and gesticulate poses that are so much more natural. Thomas and Johnston state this frankly, “drawings made as straight in-betweens completely kill the essence of the action.”

Let’s return to our friendly and hardworking jellybean example. Even in our first vignette alone, we can see the principle of arc. Our jellybean doesn’t just move to the right as they exercise. It lunges downward in an arc, as any one of us would do, and the medicine ball also doesn’t move in a straight line as it has a natural twist to its motion as it is raised. Similarly, when it meets its demise with the ice cream cone, it isn’t just a horizontal fling; we see the skateboard shoot out in a natural direction, and our jelly bean flung, crash, and slide downwards in a more naturalistic way. That’s arc at play!

Secondary Action

Generally, any vignette has one major action. Secondary action poses that we can use other actions to help convey that primary action. If we return to a previous example, we might take a deep breath as we descend into that squat. The breath is a secondary action. We may cover our faces as we sneeze; the movement of our hands is a secondary action that helps fortify the story of the first.

The secondary action doesn’t always need to be subservient to the first. For example, if our scene takes us from being irate to happy, the secondary action could turn that open mouth yell into a broad smile.

Let’s return to our jelly bean again. In our first vignette with the lunges, you might refer to the sweating as a secondary action. Sweating helps reinforce that the jelly bean is exercising and exerting effort, which makes it all the more comical when it meets its ice cream finish. You could also apply this principle to the jelly bean’s hula hooping. As it is rotating in the hula hoop, it is also waving its arms. The arm waves are the secondary action.

Timing

We talked about timing earlier on and how we use it to build anticipation through slow in and slow out. Timing in itself is a motion design principle. Whereas with slow in and slow out, we are largely referring to the transitions between major actions, timing as an overall principle refers to the pace of the sequence throughout our motion graphics. In the early days of animation, these were broken down into the idea of “in betweens” which you can think of as how many frames to give pace to an action. For quick pace we’d use less frames, and for longer gags, we might space it out with more.

Let’s refer again to our jelly bean friend above. It works out at roughly the same timing in its exercise vignettes. As it transitions into relax mode on its skateboard with a cocktail, it slows down, until it is flung from the skateboard into the ice cream. In this instance, we use timing to build the narrative – of a tried and true exercise routine, the joy and luxuriating of rest, and our silly and speedy gag into the tasty ice cream.

Exaggeration

Exaggeration is one of our more literal principles of motion design. Put simply, if an element is going to do something – make them do more of that thing.

Exaggeration should always be blended with a sense of realism, so that our audience can anticipate what’s to come. Realism doesn’t necessarily have to mean realistic in any given motion piece; it can simply mean a sense of realism to that world.

In this example, we have the predatory tiger emerging from behind the leaves. It looks angry at first, and then curious and even awe-struck as our pink dot floats around the screen. We use exaggeration here to not just drop the jaw in shock and awe, but to raise its eyelids, dilate the pupils, and adjust the whiskers. Even beyond the tiger itself, the leaves spread apart in a deliberate way that isn’t how they’d move in real life, but helps us reveal the tiger, adeptly employing the exaggeration principle. The overall effects of exaggeration don’t come across as forced, but instead build the story of this adorable vignette.

Solid Drawing

Solid drawing may seem counterintuitive, but it isn’t really about drawing solid objects at all. Rather, it’s about understanding how your objects move within the space to suggest a 3D feel and articulate a perspective that you just don’t get in 2D or static design.

Take the above example for instance. The ways in which our fish move throughout the space are a great example of solid drawing. Even though they are of course only two dimensional, our main character fish navigates about the space and its flippers move in such a way that we understand it to be spherical.

Appeal

Our last motion design principle is appeal. Appeal essentially gets at the charisma of a piece, or as Thomas and Johnston write, “it meant anything that a person likes to see, a quality of charm, pleasing design, simplicity, communication, and magnetism.” In this way, appeal can sometimes be seen as more subjective than the other principles of motion design we’ve covered, but it is no less important. Appeal can be one of those principles that is easier to define when you don’t see it; we can all recognize images or animations that lack some kind of dynamism and don’t give us a desire to watch.

While character isn’t at play in the above example, appeal very much is. The kaleidoscopic arrangement of the elements and colors is at once simple and vibrant, keeping our visual interest, and perfectly using the concept of appeal.

That covers all of our motion design principles, as outlined by the maestros of animation themselves. Discover how to put these principles into action on Fable.