A introduction to an important concept in UX animation.
To start, what exactly is a timing function? It's almost self explanatory, but Codrops gives a great definition:
“A timing function in CSS is a (mathematical) function that specifies the speed over time of an object being animated or transitioned from one value to another. It describes how a transition or animation will progress over one cycle of its duration.”
So basically, timing functions are really crucial for getting the speed of animation you want, and overall style. There are different types of timing functions you can incorporate into your UX animation, and we're going to explore a few below.
Ease
This is a function that starts slowly, increases in speed, then decreases gradually towards the end.
Linear
There is consistent speed in the function from beginning to end.
Ease-in
This function has a slow start, speeds up quickly, and then stops abruptly.
Ease-out
Basically the opposite of ease-in. Ease-out is an abrupt start, and then slows down as the end.
Ease-in-out
A combination of ease-in and ease-out, this function starts slow, speeds up, and then slows down at the end.
Below are examples of the timing functions explained above, beause the best way to understand how something moves it to see it. Check out this Codepen from Rachel Cope:
See the Pen Transition-Timing by Rachel Cope (@rachelcope) on CodePen
This Codepen gives examples of each one of the timing functions. Hover over each of them to see how they compare!