Animation Easing

The Easing of an animation defines how its gets applied.

In most animation software or frameworks, the concepts of easing and transition are combined, but in Godot, they are separate.

While the transition function determines if the animation is linear, quadratic, cubic, or other, the easing function determines how the animation accelerates or decelerates.

Easing is very important to obtain natural and pleasing animations. You almost never want to use linear easing, as it looks robotic and unnatural.

Easing Curves

There are five easing options in Godot:

• EASE_IN: The interpolation starts slowly and speeds up.
• EASE_OUT: The interpolation starts fast and slows down.
• EASE_IN_OUT: The interpolation is slowest at both ends.
• EASE_OUT_IN: The interpolation is slowest in the middle.

Easing alone does nothing!

No matter what easing you pick, if the transition is linear, then the easing will have no effect. Remember to set the transition to something other than linear!

Linear

Linear easing is the simplest easing function, where the animation progresses at a constant speed.

If a car was driving a 100 meters long road in 10 seconds, with linear easing, it would reach 50m in 5 seconds.

Ease In

Ease In easing starts the animation slowly and accelerates as it progresses. This is a very natural motion, like a plane taking off, a car accelerating, or a ball falling.

If a car was driving a 100 meters long road in 10 seconds, with ease in easing, it would reach 50m in 7.5 seconds.

Ease Out

Ease Out easing starts the animation quickly and decelerates as it progresses. It is also a very natural motion, like a car braking, or a plane landing.

If a car was driving a 100 meters long road in 10 seconds, with ease out easing, it would reach 50m in 2.5 seconds.

Ease In Out

Ease In Out easing starts the animation slowly, accelerates in the middle, and decelerates at the end. For any motion that you see in its entirety, this is the most natural easing. Nothing in real life can start instantly, or stop instantly, so this is the most common easing function.

If a car was driving a 100 meters long road in 10 seconds, with ease in out easing, it would start slow, reach 50m in 5 seconds, and then slow down to a stop in the next 5 seconds.

Ease Out In

Ease Out In easing starts the animation quickly, decelerates in the middle, and accelerates at the end. This is a less common easing function, but it can be useful for some animations.