Animation Transition

The Transition of an animation defines how the animation progresses over time.

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

Transition functions are important to make animations look natural and pleasing. In real life, nothing moves at a constant speed except maybe a satellite in orbit. Everything else accelerates and decelerates.

In other words, you almost always want to use easing functions for any animation. It just adds that little touch of polish.

Because you will understand easing functions better by exploring, I recommend visiting the Godot transitions laboratory and play a bit before continuing.

If a transition is linear, the rate of change remains the same throughout. This is the simplest transition function.

But what happens if we plug in another function? This one is called expo (for "exponential"). It starts slow, then speeds up, and finally slows down.

This is a much more natural movement and matches what we observe in reality.

What do all those words mean?

The names "Quad", "Expo", "Cubic" often come from mathematical functions. For example, "Quad" is short for "quadratic", which is a function that has a squared term in it. "Cubic" has a cubed term, and so on.

How do transitions and easing work together?

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

For example, this is the back easing function with both ease-in and ease-out transition:

It's called "back" because it makes the value "back out" of its range. In the beginning, it will go a bit below the starting point, and at the end, it will overshoot its target, a bit like a Looney Tunes character winding up, running, and going too fast to stop immediately when it reaches the target.

But here's the same back easing function with only ease-in transition:

Now, the animation will start below the starting point, but it will just climb in speed from there till the end where it stops abruptly; our Looney Tunes character just crashed into a wall.

A transition function without easing does nothing!

Easing & transition have to work together. If you pick a transition function, you need to pick a non-linear easing.

Easing functions are very versatile and can add a lot to an animation. Here's an example of the elastic easing function with ease-out transition:

It's called "elastic" because it looks like a rubber band being stretched and released. It starts very fast, almost immediately reaches the target, then bounces back and forth a few times before stopping.