Interactive Animation Easing Functions

The Basics of Animation Easing

There are a couple of basic things we need to understand.
To calculate our easing function we need to have a control time, that is, a time that is not being eased.

Let's call this time t.
Our t goes from 0 (the beginning of our animation) to 1 (the end of our animation) over whatever duration we want.

To get our eased time we input our t at each step of our animation into whatever easing function we want. This does not alter our t, instead it gives a new eased t.

Let's define a common simple easing function to make things clearer. bi = t => t * t Our bi function takes in our t and gives us back a value of t * t

Let's think about what that looks like at a couple of key steps in our animation

What about when our animation is starting?
t = 0, then we get 0 * 0

What about when our animation is ending? t = 1, then we get 1 * 1 This should always be the case. When our t = 0 our eased t should = 0 and when our t = 1 our eased t should = 1. What about when our animation is halfway?
t .5, then we get .5 * .5 We can see how our t, which represents what percentage of our animation is completed, is being transformed by our bi function to make us start slow and end fast, that is because it is a ease in function.

There are also ease out and ease in-out functions (we will see them below).

If we wanted no easing we would do nothing to our t and that would be called a linear function (it goes in a straight line - no speeding up or slowing down).
We can think of our easing functions taking that straight line and bending it, where and how much it bends our line depends on the given function.

Let's take a look at these easing functions

All ofthe following function are ease in functions. bi = t => t * t tri = t => t * t * t quad = t => t * t * t * t circle = t => 1 - sqrt(1 - (t * t)) sin = t => 1 - sin(PI * 0.5 * (1 - t))

Ease In, Ease Out, and Ease In-Out

Our bi, tri, quad, circle, and sin functions are examples of ease in functions.

This means that they are slower at the beginning and faster at the end.

If we wanted to turn these ease in functions into ease out functions we could just pass our t and function to another function that transforms ease in function to ease out functions. out = (t, in_f) => 1 - in_f(1 - t) This is how we are calculating our ease-out functions in our interactive Turning our functions into ease in-out functions is similar, but a little more complicated.

We want to do the ease in function for the first half of the animation and then the ease out function for the second half of the animation.

To accomplish this we see if our t is less than .5, if so we double our t(so it goes from 0 to 1 instead of 0 to .5) then half the result, because we want it to only account for half of our animation.

That handles the first half of our animation, now let's handle the second half.

If our t, is not less than .5 then we do the same thing we did to make our ease out function.
Because we are still only dealing with half of our timeline will also double (1-t) half the result and then finally add .5. We add the .5 because we want our second half to start halfway instead of at 0. This example has programming syntax, whats called a ternary operator.
It works like this (true or false) ? do this if true : do this if false in_out (t, in_f) => t < .5 ?
in_f(t * 2) * .5 :
1 - in_f((1- t) * 2) * .5 + .5 not all functions are suitable for in-out easing

The Most Popular Easing Functions

The most popular easing functions are simple: bi, tri, and sine.
We can make more complicated functions for easing, but it is rarely needed.
Not only is simple easier, simple is often better.

Conclusion

Easing functions are vital for good looking animation, and the idea behind them is quite easy to understand even if some of the actual functions can be difficult to get our brain around.

There are many more specific easing functions that we could come up with, however we now have the intuition of how easing function work in our examples and in general.