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.
Learn more about easing and keyframes in Premiere Pro
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.
Discover more about animation.