Easing-In and Easing-Out, an Essential in Animation

One of the twelve principles of animation.

To describe ease in and ease out simply, easing in is using more frames at the beginning of an action and then quickly speeding up, while easing out is the inverse, with more frames at the end of an action, to make the previous movement seem even faster. This has been a core part of animation for a while, though originally before animation was done digitally, it more often referred to as "slow in" and "slow out" respectively.

This example from the book "The Animators Survival Kit" by Richard Williams, explains the concept with this diagram. (Great book, by the way. I highly recommend it for those interested to learn even more about animation)

Easing in and out of actions give movement a more natural feel and bounce to them, instead simply having equal frames for the entire action, where often the result looks stiff.

While easing in and out are often used in tandem to create a natural and smooth movement, let's look at examples for each separately.

---

Easing In

This gif is a sprite from Ace Attorney 4: Apollo Justice which depicts the main rival slamming his fist against the wall for emphasis.

(Be prepared to see Sam continue to shoehorn in his favorite video games and shows all semester)

This is a great example of easing in. The beginning of the action has a surplus of frames near the beginning to really build the anticipation and speed of the movement of his arm, which really helps communicate how much force is used. Don't see it? Here's a slowed down version.

You can now see the individual frames much easier, and how they group near the beginning of the action. With this slow motion, we can also see some of the other principles of animation at play. The necklace, hair, and jacket all continue moving after the main motion ends, showing a good use of following through, and the wind up of the arm in the first few frames clearly show the anticipation being built.

---

Easing Out.

This gif is from Ace Attorney 6, showing one of the main protagonists slamming her palms onto her desk with force. This is a good example of easing out, as there is a lot of frames at the end of the movement, allowing for emphasis of the force and secondary movement of her ponytail and clothes.

Here in the slower one, you can more clearly see the excessive follow through which utilizes the extra frames. The hair waves back and forth before settling, as does the tie and earring, and her necklace bounces, giving the figure weight. You can even see the entire figure shake up and down for just a frame, to really show the force put into the slam.

---

Utilizing both

Most animation uses both easing in and easing out to make a smooth feel. Finding examples of just one or the other proved to be extremely difficult, as its rare to find used without the other. Instead of using one of the million examples for this principle, as its present in almost all forms of animation, I attempted to capture it myself.

In this little animation I quickly made, you can more clearly see the use of easing in and out, as there is only one action to focus on. I think I accidentally eased out more than I eased in, yet it still works as a good example. There are only a few frames for the middle of the bounce, (3-4) and most of the frames are in the beginning and end of the action, allowing the bounce to appear to be faster and realistic. Squash and stretch was also utilized here, to keep the bounce springy.

---

Conclusion

As clearly demonstrated, "Easing In" and "Easing Out" is utilized in almost all forms of animation, and is one of the essential principles to ensure that motion looks lively and realistic in any animated medium.