How to Improve Your Skills and Craft Better Animations

Photo and Illustration by Felippe Silveira — dribbble.com/felippe

Animation evolved through the years and today’s computer generated animations are very different from the classic way people were used to do it. However, even the new methods of animation are all based on the same principles from the old draw by draw, frame by frame, animation method.

When comparing animations from the past to more modern ones, it’s common to notice a lack of soul and life in what we see today. Things look rigid or mechanic, for not saying lifeless. Many animators nowadays are focused on their software and less at what is essential to animation, being the smoothness of one those things.

Classic animation was a work of passion, a constant back and forth to achieve the perfect result and timing for each scene. Today, it seems like delivering is more important than quality. This lack of smoothness happens with all new animators even though some experienced ones can find difficult to master that skill.

There are some points I will be talking about in this article that will help you achieving better results in your work.

• Understanding Time and Space

• Acceleration

• Working with the Animation curves

• Observing the Real World

Understanding Timing and Spacing

An Animation is a matter of timing and spacing. Timing defines the total time and the rhythm of an action, when something “hits”, “bounce”, “turns”, etc. Spacing is what makes the dynamism of an action. The distance of each drawing inside an action is what makes it look faster, slower, aggressive or calm. This terminology is related to classical animation, where we have lots of drawings in order to create a movement.

Nowadays we can relate:

  • Timing > Keyframes.
  • Spacing > Animation curves

The same movement with different timing and spacing will result in different dynamics to the animation.

Acceleration

The understanding of the acceleration force is what makes the difference on your animation results. Imagine an object going from point A to point B. If you work on After Effects you can easily do that by setting two keyframes for each point and you will have the default rigid timing.

Inside this movement, we can work the acceleration in different forms, being Ease Out and Ease In the most common possibilities of acceleration. Imagine that Out is the animation of a rock falling — starts at 0 and accelerate — and In is the animation of a car braking — starts fast and slow down until 0.

Working with the Animation Curves

Now things will become clear to you. The best way to apply the concepts I told you above is knowing how to handle the Animation Curves — Found at the Graph Editor, inside After Effects. You need to have at least two keyframes selected and then, click the Graph Editor button on your timeline.

Where to find the Graph Editor inside AE

The graph curve is how we work with spacing nowadays. Changing the aspect of the curve is how you tell your software if you want things to be fast or slower, and based on this curve, it will create more or less frames(drawings) to achieve the desired result.

By default, the movements inside After Effects are linear. They start and end with the same speed.

Tip: If you select a keyframe and do a right click on it, you can use a fast tool in the menu to add the Easy Ease effect. It will add both ease out and ease in to your animation. Later, you can even edit this curve in the graph editor.

Switching from Value Graph to Speed Graph

There are two types of graphs you can work with, inside the Graph Editor: Value Graphic and Speed Graphic. I particularly work inside the Speed Graphic most of the time and it is the default of many versions of After Effects.

When I talked above about acceleration I told you that we can have the same timing with different types of movements just changing the animation curves. I will show you how they work and the difference it can make to the final animation.

If you analyse the Speed Graph, you’ll notice that the Easy Ease curve is a parabola and all the work here is related to how this parabola will be modified. As the default for the Easy Ease, we have a very smooth curve with a peak in the center. If you see at the left of the graphics you’ll find metrics that show X px/sec, representing the speed of the action. The higher this peak of the curve is, faster the movement will be at that part.

Clicking on the keyframes that are at the base of graphic, you’ll find handles that are used to change the form of the parabola and by doing that, we change the animation we have. The key here is to only move those handles in the horizontal, it helps to make things smoother and closer to what we want to achieve.

I created the image below to showcase some results we can have by playing with the animation curves. All the movements have only 1-second duration and the variety of movements is all done with the animation curves.

Different Animation Curves and how they affect the Animation

Animation Curves are a great tool to be used in all animations you create. Take time to understand how they affect the feeling of the animation and you will see how your animations will improve.

Observing the Real World

The curves showcased above are essential to make you represent the movement you’re trying to achieve, but there’s a very important factor that I left to the end and that makes all the difference. As an Animator, you need to see and observe the world that surrounds you. The base of a good animation is the understanding of how things actually move in the world. Observing your day by day, how people walk, how certain objects fall and bounce… Analyze all those things to improve your animation quality.

Even if you have the freedom to exaggerate some movements or give them some personal characteristic, it all starts with the real movement of an object.

Observation is one of the main skills of an Animator or Motion Graphics Professional.

Just get out of your computer, take a look around, see how people react to certain actions, how things really move and incorporate that feeling to you work.

Both the importance of observation and of knowing how to use animation graphs are what I consider to be essential to create high quality animations. I believe that we always need to go back and understand the origins of things in order to improve then. It’s not different with animation. You will see that when you have those concepts in mind and apply it on your daily basis, your work will start to change for better.

There’s a lot more to talk about, but I will be going deeper on it at the future, you already have a lot to think and test. Apply what we taught you and tell us what results you achieved.

Originally published at mowestudio.com on November 11, 2015.

Did you enjoy the article?

  1. Recommend it by clicking on the ♥︎ below so more people can read it.
  2. Subscribe to our newsletter and receive not only our articles but many other content before everyone else.

Do you have any question or opinion?

Share it! Let’s make this a starting point for more meaningful discussions.

--

--

Felippe Silveira
MOWE Studio — Articles for the Creative Field

Co-Founder and CEO of MOWE.Studio; Teaches about Animation and Interface at UXMotionDesign.com; World Traveller and Storyteller