How to make animations look realistic

Five tips for creating true-to-life animations

Welcome to the third and final post in the #WeekOfIcons series. Week Of icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. This year, we focus on a fusion of icon design and animation. Throughout the week, we have shared three animation-related tutorials and five freebie icon sets, including some animated icons.

Creating a basic animation is simple enough, but what if the goal is to add realism or visual interest? In this blog post, we’ll cover a few tips and basic principles to help you make more realistic and appealing animations.

Follow Through & Overlapping Action

“Things don’t come to a stop all at once, guys; first there’s one part and then another.” — Walt Disney

To create a more true-to-life and fluid animation, you can use follow through and overlapping action. We use follow through on parts that still move after the main part/character stops moving. Overlapping action is the difference in timing and speed of ancillary components that belong to a main part or character.

If we pay attention to the ribbons, we first notice that they drag behind the movement of the boxes, and then they follow through. All of this, combined with the animation of the box lids, would be considered overlapping action.

Depth

Achieving depth and dimension in your animation can be done with simple tricks, like simply repositioning elements, shrinking them down, and possibly skewing them as well.

In the comparison featuring the reindeer, we notice that moving the face in unison, stretching the nose, and moving the ears and antlers not only provides us with a more interesting result but with more depth as well. Otherwise, an animation might not be as convincing, unless it’s a stylistic choice.

Anticipation

The principle of anticipation involves some sort of build-up that prepares viewers for the release of the energy. In other words, it’s about preparing for an action. Using anticipation in an animated project helps prepare viewers to follow what’s going on and what’s about to happen.

With the example below, we see a difference in the hopping gift boxes. Without anticipation, there’s no build-up or, in this case, no squash & stretch before the actual hop. In the opposite case, the viewers are prepared to see the box jump because of the squat poses.

Squash & Stretch

Squash and stretch, an animation principle that uses the contrast of shape change, is a great way to add flexibility and elasticity to any animation.

The blue box on the right begins with a squash pose (anticipation) and transforms into a stretch pose when the jump height is reached. Then, when the box lands, it goes back into a squash pose, and finally, it returns to the original scale/size. The yellow box follows the same principle.

Timing & Spacing

Timing and spacing is a simple, yet important principle. Timing refers to the timing (how many frames) of an action (going from point A to point B), whereas spacing is concerned with how close or far away the previous or next drawing/pose/layer is. If an animation had even spacing, then its movement would seem more linear. Otherwise, if an animation had uneven spacing, the movement would appear to accelerate or decelerate.

In the example underneath this paragraph, we see that using linear keyframes (or even spacing) in After Effects CC for a jumping animation looks unrealistic, while using Easy Ease keyframes (unevenly spaced, or tighter spacing near the top and bottom and wider spacing near the middle) gives us the squash/anticipation followed by the more realistic gravity.

Final Thoughts

If you’ve found these tips helpful, I’d suggest learning more about the 12 Principles of Animation, which were introduced by two legendary Disney animators (Ollie Johnston and Frank Thomas). Lastly, remember to practice what you’ve learned, and if you run into any trouble or have questions, feel free to comment below or send me a DM on Twitter!

Week Of Icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. Introduced in 2017, the campaign focuses on inspiring designers and design-enthusiasts to learn more about iconography.

The icons used in this article are designed by Chanut is Industries and animated by Yup Nguyen. They are available for download as today’s Week Of Icons freebie.