The Easing Blueprint

The main ingredient that influences how our animations feel is easing. It describes the rate at which something changes over a period of time.

Below, you can see a simple example of how easing can transform an animation. Toggle between the two easing types and notice how, even though every other property remains the same, the animation feels significantly different.

Perception of speed

Easing also plays an important role in how fast our interfaces feel, so it's absolutely crucial to get it right, as the perception of speed is often times more important than the actual performance of your app.

Which one of the two spinners below would load faster?

I'd say the one on the right, simply because the animation is faster. While this specific example focuses on duration, easing can also significantly alter the perception of speed.

Like this modal animation that has the exact same duration, but different easing curves.

The difference here is subtle, but it makes a difference.

To know when and what easing to choose, I've developed a system for myself that I reference when working on animations. It's a blueprint that'll be a great starting point if you don't know much about motion. It covers every type of easing that is built into CSS and it describes when to use it. Additionally, it provides a few custom easing curves made by Benjamin De Cock that I use very often.

ease-out

This is the curve I use the most in my UI work. It's great for user-initiated interactions like opening a modal as the acceleration at the beginning gives the user a feeling of responsiveness. I apply this easing for most enter and exit animations.

One good example of this is the Family iOS app where everything feels very snappy. They probably use spring-based animations which we will cover later, but if we’d have to convert it into an easing type, it would be an ease-out curve.

ease-in-out

Starts slowly, speeds up and then slows down towards the end, like a car. This is the most satisfying curve to look at in my opinion. I use it for anything that is already on the screen and needs to move to a new position, or morph into a new form.

The animation below is a good use case for ease-in-out.

ease-in

It's the opposite of ease-out, it starts slowly and ends fast. Due to its slow start, it should generally be avoided as it can make interfaces feel sluggish and less responsive.

Compare these two modals, even though they have the same duration, the one on the right feels faster due to the ease-out curve being applied.

The difference between ease-in and ease-out in enter and exit animations.

linear

Since linear animation moves at a constant speed, it should generally be avoided as it can make motions feel robotic and unnatural.

The only time I would use linear is for a loading spinner or other continuous animations where there are no interactions.

A marquee is a good use case for linear easing type.

ease

A similar curve to ease-in-out, but it's asymmetrical, it starts faster and ends slower than an ease-in-out curve.

I use this one mostly for hover effects that transition color, background-color, opacity, and so on.

Custom easings

In the resources section of this part I included a link to a set of custom easings I often use. They are sorted from the weakest to the strongest acceleration for each type of easing.

 
All the examples you've seen up until this point are actually using these custom easings, as the accelerations of the built-in ones are not strong enough.

 
Here you can see the difference between the built-in ease-in-out and a custom one from the blueprint.

Built-in

Custom easing here feels more energetic.

The only time I personally use a built-in easing curve is for hover effects when I reach for the ease curve, which by the way is the default timing function for transitions in css.

Create your own curve

You can also create your own custom easing curves by using the cubic-bezier function in CSS. This is a great way to experiment and get a better feel for how different curves work.

 
Or you can use a very specific easing for a very specific scenario like I did for Vaul. Vaul uses an easing type that is made purely to mimic iOS' Sheet easing. I haven't made it myself, it's made by the Ionic Framework. This gave the component a more native feel with little effort.

 
That's all you need to know for now. If you are not that comfortable with crafting animations just yet, I highly encourage you to reference the blueprint as much as possible. I also encourage you to try every easing from the blueprint after this lesson. That will give you a better understanding and feel of how each curve works in practice.

Feedback

I’d love to hear your feedback about the course. It’s not required, but highly appreciated.