What is Easing?

One of the secrets to fluid-looking animation is motion that accelerates and decelerates, rather than moving at a constant rate.

Even the world's most advanced sports car takes time to accelerate to speed. So does your hand, when you wave.

This process of gradually speeding up and slowing down an animation is called easing. In contrast, we refer to motion at a constant rate as linear.

Animation using linear timing

Linear motion looks unnatural because it's not how things move in the real world. Compare the above animation which uses linear timing to the one below, which uses easing.

Animation using ease-out timing

In the later animation, easing has been applied to cause the motion to gradually slow down rather than stopping suddenly.

There are many kinds of easing. Here are the three most common:

• Ease-in: Easing into the animation means it starts gradually. In other words, the animation starts slowly and accelerates. Think of it like a rocket taking off. This kind of easing is good for objects leaving the screen.
  
  
• Ease-out: Easing out of the animation means it finished gradually. In other words, the animation gradually slows to a stop. Think of this like a train arriving at a station. This kind of easing is good for objects moving into the screen.
  
  
• Ease-in-out: When the animation starts slow, speeds up, then slows down again to a stop. This is like a combination of ease-in and ease-out. This is useful for an object moving from one place on the screen to another place. (Unless it's supposed to look like it's falling, in which case an ease-out will cause it to come to a sudden stop).

How do I use Easing?

You can apply easing to any property that supports keyframes, including location, scale, rotation, color, opacity, and all of the various effect parameters. Here, we'll look at the technique for easing location, but keep in mind that similar steps can be applied to any property.

Step 1: Keyframes

Before you can set an easing curve, you first 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, like this:

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).

Keyframes for a different property (wrong)

If this is the case, change to the relevant property before trying to edit the easing curves.

Step 2: Open the Curve Editor

To open the curve editor, tap the  icon.

Step 3: Scroll the Playhead Between the Keyframes

Scroll the timeline so the playhead (the vertical white line) is between the two keyframes.

The timing curve is only visible when the
playhead is between keyframes

Step 4: Adjust the Curve

There are two ways to adjust the curve.

You can choose from the preset buttons on the right:

You can also 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. Steeper slopes represent faster movement, as shown in the diagram above.

Multiple Keyframes

Keep in mind that 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, which means two easing curves. The number of easing curves is also exactly one less than the number of keyframes.

Advanced Easing Types

In addition to the standard Cubic Bezier easing curves (with two handles), there are also advanced easing types to animate things like bounces, elasticity, stepped motion (such as a ticking clock) and more. Be sure to explore the advanced easing types for a convenient way to create sophisticated animations!

• Bounce: Bounce easing 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: Elastic easing creates an animation similar to that of releasing a taut spring. It quickly shoots past the final value, then settles into place. 
• Cyclic: Cyclic easing repeats the progression between the initial and final values. It can be used to create an animation that cycles and back and forth, or even just a simple one-way repeating animation. 
• Random: Random easing introduces an element of controlled randomness to the progression of the animation, similar to the effects of Brownian motion.
• Steps: Steps easing 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: Elastic Steps easing is 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 undesirable results. However, 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 enabling overshoot in the ••• overflow menu button. Once enabled, the handles can then be dragged beyond the dotted lines. If you would like to go back to default, you can also disable overshoot in the ••• overflow menu button.

Copying Curves

If you want to re-use an easing curve on another pair of keyframes (or on another layer), just tap the ••• overflow menu button next to the curve:

Here, you can copy the curve, then scroll to a different pair of keyframes (or even go to another pair of keyframes on another property or layer) and use this same menu to paste identical curve settings.

You can also use Paste Curve to All Keyframes to update the curve between all pairs of keyframes for the selected property (other properties or other layers are not affected).

We also have an Introduction to Easing video on our YouTube channel, which you can watch here:

Please watch this video if you would like to see a video explanation about Easing!

That wraps up our explanation of easing curves. Time to try it for yourself!