Animation principles in motion design

By Nilabh Umredkar 3 years ago

Designing is art. And when you move your designs, it is giving life to it. You are making it alive. Designers usually go on exploring the art of animation at some point in their career. Like designing, animation has its own set of principles.

Here are some insights on how we can club them together and create that smooth flowing and lively motion design (or motion graphics as some might prefer to say)

Let’s lay out some of the basic design principles before we move on to animation.

Balance

Emphasis

Rhythm

Contrast

Harmony

Pattern

Proportion

Repetition

Variety

Motion is physics as we understand in real life.

Animation principles are created to make your movement believable and entertaining based and confined under the laws of motion in the physical world. For example gravity and weight. Consider there is no gravity, weight and no material properties to any object. How will the motion be? Robotic, Bland and dreary right?

Here are 12 principles of animation as introduced by animators Frank Thomas and Ollie Johnston in the early days based on the work of leading Disney animators. These have become the 12 commandments to follow in the art of animation.

Animation principles in motion design

Squash and stretch

This is one of the most important principle. It gives your object a sense of weight and flexibility. Your object becomes ‘Organic’ and in motion design, it also emphasizes the path of your motion. A sense of speed can also be achieved by stretching your object.

Squash_n_Stretch_A Squash_n_Stretch_B

Staging

Staging is simply the arrangement or placement of your object to draw your audience’s attention. It is your compositional skill on how you maintain the balance and white space in design. It is important to make the presentation of your object completely clear to the viewer.

Staging

Anticipation

Anticipate any movement before it happens to prepare the audience for the action. This is to help the believability of the movement. Move back before you move ahead. Move down before you move up. You cannot shoot a catapult without stretching it backwards first and you cannot hit a home run without swinging your bat backwards first.

Anticipation

Straight ahead and pose to pose

This principle is the way you approach a traditional animation scene. In straight ahead you animate the scene from start to end and in pose to pose, you block the key actions and movements and then fill in the intervals. Likewise, we can interpret this principle as the workflow we adapt in motion design. Do we go straight ahead animating the whole sequence or do we block and plan the key elements first like the placement, start-end positions and transitions, and then animate the details.

Follow-through and Overlapping

In Physics, Follow-through is the result of inertia. It means that a part of the object will keep moving for a while even if the base or center of mass of the object has stopped. Take antennae for example. The top part will keep oscillating even after the bottom leading part has stopped. The overlapping action suggests that different part of the object will move at different pace and timing. Like a tail or a drape will overlap the action of its parent object. This creates a feeling of ‘drag’ in motion which makes the action realistic and gives a sense of variety to the animation.

Followthrough_Overlap

Slow in Slow out

This is a very important principle we must follow in Motion design. In reality, every action takes time to start and stop. It eases in the motion and then eases out of it. A car cannot accelerate directly to 80 miles an hour and cannot stop suddenly either. It has to slowly gather speed and then settle on a stop. This is a very important physics to consider while moving any object from point A to point B unless we intend to show robotic motion. Always ease (slow) in and ease (slow) out in animation.

SlowIn_SlowOut

Arcs

Arcs are natural and beautiful. Smooth and soothing to look at. When any object moves in arcs, it demonstrates grace. It is the rhythm of your motion. The elegance of your action. Slow in slow out and Arcs give you the ‘smooth and fluid’ animation everyone talks about.

Arcs

Secondary Action

In character Animation, secondary action gives more life to the character. A person walking can be scratching his head. Here, walking is his primary action and scratching his head is the secondary action which helps to enrich the animation further. It is like adding bells and whistles to your animation. We can go on implementing this principle to a great extent in Motion design. For example, the clock has a primary hovering action. The hands of the clock and the alarm wiggle can be considered as secondary action.

SecondaryAction

Timing

Timing is everything. Traditionally it refers to the number of frames given to an action. Ergo; more the frames, slower the action and vice versa. In motion design, do consider the timing of each object’s animation to establish its characteristics. For example, a paper will fall slowly than a brick. Every other principle only functions if the timing is done right.

Timing

Exaggeration

This principle is directly related to ‘Emphasis’ in Motion design. ‘Make it loud so it stands out’. To exaggerate any action, you need to push the pose or action as much as you can to emphasize it for your audience’s eyes. It adds variety to the otherwise monotonous actions and help to convey your message clearly.

Exaggeration

Solid Drawing

Solid drawing is considering the Volume and weight of your object in 3-dimensional space. In Motion Design, consider animating your objects in 3D depth in addition to just X and Y axis. You can cheat the viewer into believing that your animation is 3D by playing with the perspective/Depth of your object Animation.

Though completely done in 2D the shading of the object and its animation through space gives us an illusion of volume and depth.

Solid_Drawing

Appeal

And in the end, it’s all about Appeal. It is about how captivating and engrossing your animation is. The way you arrange your scene with harmony, and the application of the principles will make your design speak for itself. It makes your scene interesting to the viewers and engages them visually.

All of this may seem like a tedious study but implementing these principles in your technique will radically change the quality of your work. Think of Animation as your Christmas tree and these principles as the baubles and candy sticks. What is Christmas without the embellishments?

And then you will be able to animate like in this tutorial about how to create vector animations:

 


Comments

Reply to Jonatan Yair

Jonatan Yair
Jonatan Yair

3 years ago

Great post and useful info, I am not designer nor illustrator, I am on the path of learning to draw, and then why not, some simple animations. Congrats to Freepik team for the excellente work.

Freepik
Freepik

3 years ago

Thank you so much!! keep on drawing and making animations! :)

Reply to Fiyero109

Fiyero109
Fiyero109

3 years ago

I'm not very familiar with the animation world. what software do you use to achieve these effects?

nilabh
nilabh

3 years ago

Hi. These animations are completely done is After effects.

Reply to farah

farah
farah

3 years ago

I tried doing some things on Adobe After effects it seems difficul First but easy to get used to it
Thanks for the information it's very helpful...
That's why I love freepik <3

Freepik
Freepik

3 years ago

Thank you so much! Soon, we will publish new tutorials about animation ;)

Reply to Taufik Lukman

Taufik Lukman
Taufik Lukman

3 years ago

Need to read more articles like this! So enlightening

Freepik
Freepik

3 years ago

Thank you so much!! Stay tunned. Soon we will publish new animation tutorials ;)

Reply to payal sharma

payal sharma
payal sharma

2 years ago

Very nice Post. I like it.
Thanks for giving important information.
http://arenaanimationudaipur.com/

Reply to Anna Johnson

Anna Johnson
Anna Johnson

2 years ago

Great work Freepik!!
The concept of follow-through and overlapping makes sense with the concept of Inertia. And I'm completely agree with you with the point that in motion graphic animation; the main idea is to give the audience the taste of reality and variety of information through animation.
Worth Reading, Thumbs Up!!

Reply to Amanda Johnson`

Amanda Johnson`
Amanda Johnson`

2 years ago

Woa! This is something damn useful. I must say motion graphics animation is the new emerging trend for online marketing as well as business point of view.
Such a helpful resource! Thanks Freepik and Nilabsh for sharing such an informative post!