About Animation

About Animation

About Animation

Let's Make Easing Feel Easy

Control your animation's flow between movements

✨

Connect to Content

Add layers or components to infinitely loop on your page.

✨

Connect to Content

Add layers or components to infinitely loop on your page.

What is Easing?

Easing in animation refers to the way an object changes speed during a movement. Adding easing to animations makes it feel more natural and visually pleasing.

Easing in animation refers to the way an object changes speed during a movement. Adding easing to animations makes it feel more natural and visually pleasing.

Watch the two dots move back and forth. They cover the same distance in the same amount of time, but they move from end to end in different ways.

Adding easing mimics the natural way objects move in the real world.

Changing Speeds

Objects tend to speed up and/or slow down when they move. They accelerate and decelerate. Think of a rocking chair going back and forth. It slows down as it changes directions.

Objects tend to speed up and/or slow down when they move. They accelerate and decelerate. Think of a rocking chair going back and forth. It slows down as it changes directions.

Types of Easing

Easing can be applied to animation in different patterns. Think of it as describing how the animation moves from start to finish. Look at easing if it were plotted on a graph. Your animation advances over time (X Axis) and thus change in a value (Y Axis).

Easing can be applied to animation in different patterns. Think of it as describing how the animation moves from start to finish. Look at easing if it were plotted on a graph. Your animation advances over time (X Axis) and thus change in a value (Y Axis).

Linear

This type moves at a constant speed throughout the movement. It feels less natural, but is used when animating anything that moves without slowing down or speeding up.

This type moves at a constant speed throughout the movement. It feels less natural, but is used when animating anything that moves without slowing down or speeding up.

Ease In

Your animation starts slow in its beginning and then speeds up. Great for building anticipation, like an object being launched. It will feel abrupt at the end.

Your animation starts slow in its beginning and then speeds up. Great for building anticipation, like an object being launched. It will feel abrupt at the end.

Ease Out

This applies easing towards the end of the motion. It's useful for creating smooth landings or gentle stops. Your motion will start very fast but settle down at the end.

This applies easing towards the end of the motion. It's useful for creating smooth landings or gentle stops. Your motion will start very fast but settle down at the end.

Ease in Ease Out

A combo of both methods into one smooth looking movement. Your motion will start slow, then speeds up in the middle, then slows down as it reaches the end.

A combo of both methods into one smooth looking movement. Your motion will start slow, then speeds up in the middle, then slows down as it reaches the end.

The Same…but Different!

Click the buttons below to watch the same animation play out with different types of easing. All the keyframes are the same, it's just how we get from keyframe to keyframe that changes via the easing.

Click the buttons below to watch the same animation play out with different types of easing. All the keyframes are the same, it's just how we get from keyframe to keyframe that changes via the easing.

Linear

Ease In

Ease Out

Ease in Ease Out

Linear

Ease In

Ease Out

Ease in Ease Out

Linear

Ease In

Ease Out

Ease in Ease Out

What Do you Notice?

Different parts of the animation look better with different types of easing. You will often have to adjust and mix different types of easing, there's no one-size-fits-all strategy for easing in animation.

Different parts of the animation look better with different types of easing. You will often have to adjust and mix different types of easing, there's no one-size-fits-all strategy for easing in animation.

Watch the Clock

The pendulum swings and slows down before it changes direction, while the hands on the clock move constantly all the time. Different motions require different easings.

The pendulum swings and slows down before it changes direction, while the hands on the clock move constantly all the time. Different motions require different easings.

Take Easing on a Test Drive

Watch how the car moves. When you tell it to stop it will gradually slow to a stop. When you tell it to speed up, it will gradually pick up speed. Once it reaches top speed it moves at a consistent, linear rate.

Now that you know about easing, you won't be able to animate without it. It's a crucial concept in making motion more interesting.


Ready for the next topic? Adding squash and stretch to you aniamtion works hand and hand with proper easing.

ⓒ 2025 Michael Szabo. All Rights Reserved