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:
From top to bottom, the presets are:
- Linear (no easing, constant speed)
- Ease-out (start slow, speed up)
- Ease-in (start fast, slow to a stop)
- Ease-out-in (start slow, speed up, then slow to a stop)
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.
Copying Curves
If you want to re-use an easing curve on another pair of keyframes (or on another layer), just tap the "..." button to the bottom left of the curve:
Here, you can copy the curve, then use the same menu on a different layer or different pair of keyframes to paste the same curve settings.
That wraps up our explanation of easing curves. Time to try it for yourself! Let us know what you think: Comment below, or e-mail support@alightcreative.com
Comments
14 comments
Thank you for clarification💖⚘
Thnks
Yes thank you alight :)
can use it for a video cilp to slow it down and speed it up
Omg this was so helpful thank you so much. You're the only one who could explain it in a way that I can understand. I really needed the help 😭 thank you 😁
Terima kasih saya sangat bangga ada app ini
Yes
when I press the icon of the animation curve it comes up with “key frames required” I don’t know what it means
You have to add key frames which are the diamond things on top you and the key frames anywhere you want
Bang gif alok bang
15 days ago
UJI GRATIS
Zoya herlina
thank you alight, now i know better.
Please sign in to leave a comment.