The complete guide to animation easing.
Whether your animation is straightforward or surreal, believability is essential. So, when we recreate motions in animation, the audience expects a degree of authenticity. Easing in animation is a transition method that modifies motion to make it less pronounced and jarring. To use easing in a software programme like After Effects, Premiere Pro and Animate, you can control when you use easing via keyframes placed within the timeline of the animation. In this guide, we’ll show you how.
What is easing in animation?
In the context of animation, easing lends a natural, organic movement to motion. A linear animation — one built without easing — will move mechanically without slowing down or speeding up. As this kind of consistency in speed doesn’t occur in nature, we perceive the movement as unnatural.
Objects in real life don’t start moving and maintaining the same speed throughout — they start slowly, pick up speed and slow down as they come to a halt.
Think of it like driving a car — you pull out of a stationary position, get faster and maintain that speed for a while and then at the end of your journey, you slow down to a stop.
These motions are reflected in the main easing functions you might come across in your animation work. They make motions feel a lot more organic.
- Ease in is starting the animation slowly and then speeding up the movement as it comes to a halt.
- Ease out is starting off quickly and slowing down at the end.
- Ease-in-out is a combination of these.
How does easing work?
When animating a specific object, you need to set markers called keyframes to indicate the start and end-point of the movement.
A keyframe is exactly how it sounds — it’s a key frame, aka an important frame that sets a value in time and allows the system to calculate how all the frames between keyframes should function.
The keyframes essentially give instructions that change the value for any animation that happens between each keyframe. The easing you choose to use will affect how the object moves by controlling how it animates between those keyframes.
What are the benefits of easing?
Easing is a way of modifying motion to influence the way a viewer will react. Here are some of the benefits it can bring to your animation:
- It’s human. Linear movement is not found in nature. So, when we use linear movement in animation, it brings a flat, jarring quality that will bring the viewer out of the experience. Realism and accuracy are essential to making your keyframe motions seem relatable and believable.
- It’s realistic. Easing gives a viewer time to process what’s going on. Easing ensures that the animation has a smooth momentum that gives a natural, organic feel, upholding the viewers’ willing suspension of disbelief.
- It’s vivid. Easing can also be used for comedic effect or drama. For example, ease-in animations start slowly and end fast. Imagine Wile-E-Coyote running off a canyon, hanging in mid-air before falling suddenly into the chasm. In computer animation, easing would be required to create an effect like this.
- It’s customisable. You can utilise a range of different easing effects. Some start fast, others slow. Some easing effects decelerate at the end. Whatever you’re looking to achieve from your motion, you can normally create the effect with easing.
How to animate using easing in After Effects.
After Effects is your go-to program for special effects and post-production. Here’s how to use easing on your animation.
- In your open animation, move the time indicator to the start of the timeline. The keyframes will be set as the basic linear keyframes, the ones that create a consistent speed throughout.
- Click the first keyframe, right-click and select Keyframe Assistance from the pop-up menu.
- Scroll across - you’ll find the options Easy Ease, Easy Ease In and Easy Ease Out.
- Selecting one of these will change the keyframe from linear movement to easing. You’ll see the shape of your keyframe change shape. For example, linear is diamond-shaped, while Easy Ease Out is an arrow pointing left.
- Here, you can find the right easing options to suit your motion. For example, you might choose to ease out of your initial keyframe and ease into your final one. This will create the realistic acceleration and deceleration you’d find in a natural motion.
- Pay attention to the time difference between keyframes in your timeline panel. The shorter the time interval between keyframes, the faster the movement, as it needs to complete its journey before the next keyframe. If the interval is longer, the movement is much slower, as it can be more leisurely with the journey.
- You can adjust this movement easily by simply adjusting keyframes forward or backward on your timeline.
- You can use the graph editor icon to see how easing is affecting your keyframes in graph form.
How to animate using easing in Animate.
In Adobe Animate, you can even apply easing to multiple properties at once. So, if you had an object that was moving and rotating at the same time, you could apply different rates of easing to each movement.
Here’s how it works.
- In your animation, select a keyframe frame in the classic tween span and go to the tweening section in the properties panel.
- In the easing drop down menu, select ‘Each property separately’.
- You’ll see fields for each property. Click Classic Ease to open the pre-set easing panel and select Easing options for your property.
- You can also Add customised eases. Use the customised ease panel and graph to create the perfect ease for your keyframe. It’s easy to drag and customise your ease to get it just right.
- Remember, you can also add easing to all your properties at once. Simply go back to the Easing drop-down menu and select your options.
Fascinated by the world of animation?
Keep learning by reading our beginner's guide to animation.
How to animate using easing in Premiere Pro
In Premiere Pro, you can choose from a range of easing options including Ease in, Ease out, Hold, Auto Bezier and Continuous Bezier.
Bezier allows you to customise your easing graph, while Auto Bezier helps you to create a smoother rate of change.
It’s easy to apply different easing functions to your keyframes.
- Establish keyframes for your animation.
- Select your keyframe and head to the Effect Control panel.
- On the right-hand side of the panel, click the small blue diamond shape of your keyframe. This should be linear as standard.
- Right click and go to the Temporal Interpolation drop-down.
- Select your easing option or use options like Bezier to customise your easing.
- If you right click your timeline for each keyframe and click Show Clip Keyframes>Motion>Position, you can edit your keyframes easing graph in the timeline. This allows you to create harsher or smoother transitions within your keyframe.
Easing FAQs.
What is the main purpose of easing?
Easing is designed to modify an animation’s movement to create an interesting, organic motion. Using easing stops the animation looking dull or abrupt and brings a smoothness to the movement that gives a more professional finish overall. It cushions the start and the end of the animation to soften the start and finish of the movement.
What does CSS animation do?
CSS (Cascading Style Sheets) animation is a series of commands that dictates how the animation appears on the page as an object transitions from one CSS style configuration to another. Keyframes are coded into the CSS to determine the start and end states of the animation's style and guide it along the way where needed. CSS animation tends to render smoothly and you have a lot of control over how the end product is presented.
What are the types of easing functions in CSS?
The main types of easing functions in CSS are linear, ease-out, ease-in and ease-in-out. All of these functions can be used on CSS to a more natural feel to your keyframe transitions.
What is a linear transition in CSS?
A linear transition maintains the same speed throughout the animation. The time and value of the keyframe progress at the same rate. This effect can feel robotic and unnatural, so easing functions are used to soften the movements and make them feel more authentic.
What is ease-out in CSS?
Ease-out effects start quickly and slow down. They work best on animations illustrating a user interaction, as the speed at the beginning gives an impression of a fast response time. This CSS transition can also be used for icons that arrive on the screen from offscreen, as it gives the impression that the animation is rushing to assist.
What is ease-in in CSS?
‘Easing in’ is a less commonly used transition because the slow start and sudden end can be off-putting to a viewer. However, it’s useful for animating icons or images that are heading off-screen, especially if the object being animated fully leaves the screen just prior to coming to a halt. Ease-in transitions should be kept short, as otherwise they can feel slow and create impatience in the user.
What is ease-in-out in CSS?
The ease-in-out transition takes elements from the ease-in and the ease-out. It starts slowly and speeds up in the middle. This is ideal if you’re creating an animation that goes round in a loop.