Easing in animation refers to the way an object changes speed during a movement. Adding easing to animations makes it feel more natural and visually pleasing.
Easing in animation refers to the way an object changes speed during a movement. Adding easing to animations makes it feel more natural and visually pleasing.
Watch the two dots move back and forth. They cover the same distance in the same amount of time, but they move from end to end in different ways.
Adding easing mimics the natural way objects move in the real world.
Changing Speeds
Objects tend to speed up and slow down when they move. They accelerate and decelerate. Think of a rocking chair going back and forth. It changes directions gradually.
Objects tend to speed up and slow down when they move. They accelerate and decelerate. Think of a rocking chair going back and forth. It changes directions gradually.
Types of Easing
Easing may be applied to animation in different ways.
Easing may be applied to animation in different ways.
Ease In
Ease Out
Ease In + Out
Linear
Starts slow and then speeds up. Great for building anticipation, like an object being launched.
Ease In
Ease Out
Ease In + Out
Linear
Starts slow and then speeds up. Great for building anticipation, like an object being launched.
Ease In
Ease Out
Ease In + Out
Linear
Starts slow and then speeds up. Great for building anticipation, like an object being launched.
Watch the Clock
The pendulum swings and slows down before it changes direction, while the hands on the clock move constantly all the time. Different motions require different easings.
The pendulum swings and slows down before it changes direction, while the hands on the clock move constantly all the time. Different motions require different easings.
Take Easing on a Test Drive
Watch how the car moves. When you tell it to stop it will gradually slow to a stop. When you tell it to speed up, it will gradually pick up speed. Once it reaches top speed it moves at a consistent, linear rate.
That's a wrap on easing, try adding it to you next animation and see the difference.