💡 If you prefer visual learning, check out this tutorial: Introduction to Easing.

What is Easing?

One of the secrets to fluid-looking animation is a motion that accelerates and decelerates rather than moving at a constant rate. This process of gradually speeding up and slowing down animation is called easing.

In contrast, we refer to motion at a constant rate as linear. Animation with linear timing looks unnatural because it's not how things move in the real world. Think of how a car takes time to accelerate to speed or how your hand moves when you wave.

Animation using a linear timing

In the above animation, linear timing is used, and it stops suddenly. The one below was made with Easing, so it slows down gradually.

Animation using ease-out timing

There are many kinds of easing. Three of the most common ones are:

• Ease-in: The animation starts slowly and then accelerates—like a rocket taking off. This is suitable for objects leaving the screen.
• Ease-out: The animation gradually slows to a stop—like a train arriving at a station. This is suitable for objects moving into the screen.
• Ease-in-out: The animation starts slow, speeds up, then slows down again to a stop. It can be used for objects moving from one place on the screen to another.

How do I use Easing?

You can apply Easing to any property that supports keyframes. This includes location, scale, rotation, color, and opacity, among many others.

We'll look at the technique applied to the location, but similar steps can be applied to any property.

Step 1: Add keyframes

Before setting an easing curve, you need at least two keyframes.

Be sure that the keyframes are for the current property—they should appear as solid white diamonds with a dark border:

Keyframes for the current property (correct)

If the keyframes are faint and have no borders, you have selected a different property than the keyframes are connected to (for example, they are rotation keyframes, but you have scale selected). If so, change to the relevant property before editing the easing curves.

Keyframes for a different property (wrong)

Step 2: Open the Curve Editor

To open the curve editor, tap the icon indicated in the image below.

Step 3: Scroll the Playhead

Scroll the timeline to position the playhead (the vertical white line) between the two keyframes to make the curve visible.

Step 4: Adjust the Curve

There are two ways to adjust the curve.

1. Choose from the preset buttons on the right.

2. Drag the white handles to adjust the curve yourself:

When setting the curve manually, the X axis represents the original project time, and the Y axis indicates the actual, remapped time applied to the animation.

The left side is the beginning of the animation, and the right side is the end of the animation. The speed at any instant is determined by the slope of the curve. Therefore, steeper slopes represent faster movement, as shown in the diagram above.

Multiple Keyframes

If you have more than two keyframes, there is a separate easing curve between each pair of keyframes.

In the example above, there are three keyframes. Therefore, two different easing curves exist. The number of easing curves is one less than the number of keyframes.

Advanced Easing Types

In addition to the standard Cubic Bezier easing curves that have two handles, there are advanced easing types to animate things like bounces, elasticity, stepped motion (such as a ticking clock), and more.

Here are some examples of advanced easing types:

• Bounce: Animates a value as if it were affected by gravity, falling towards the final value, then recoiling with a bouncing motion. Gravity, in this case, is towards the final value, which doesn’t have to be in a downward direction—or even have a direction at all (for example, a color).
• Elastic: Creates an animation similar to releasing a taut spring. It quickly shoots past the final value, then settles into place.
• Cyclic: It repeats the progression between the initial and final values. It can be used to create an animation that cycles back and forth or a simple one-way repeating animation.
• Random: Introduces an element of controlled randomness to the progression of the animation, similar to the effects of Brownian motion.
• Steps: Animates in discrete intervals rather than smoothly between the surrounding keyframes. It is somewhat similar to the Time Quantization effect but offers more control and can be applied to individual properties rather than a whole layer at once.
• Elastic Steps: Similar to Steps, but with an elastic bounce at each step rather than smooth easing.

Overshoot

By default, the easing curve is constrained within the dotted lines to avoid animating beyond the surrounding keyframe values, which can cause undesired results.

In certain scenarios, you might want to go beyond the keyframe values for certain kinds of motion, such as anticipation or bounce-back. This can be accomplished by following these steps:

1. Open the curve editor
2. Tap the three dots (•••) at the bottom-right of the screen to open the overflow menu
3. Select Enable Overshoot

Once enabled, the handles can then be dragged beyond the dotted lines.

To go back to default, you can also disable overshoot in the ••• overflow menu.

Copying and Pasting Curves

To reuse an easing curve on another pair of keyframes or on another layer, follow these simple steps:

1. Open the curve editor
2. Tap the three dots (•••) at the bottom-right of the screen to open the overflow menu
3. Select Copy Curve
4. Scroll to a different pair of keyframes, either on the same layer or on a different one
5. Open the curve editor for this pair of keyframes
6. Tap the three dots (•••) at the bottom-right of the screen to open the overflow menu
7. Select Paste Curve

Additionally, you can also select Paste Curve to All Keyframes to paste the curve to all pairs of keyframes in the selected property, and other properties/layers are not affected.