Eric Button

Interfaces: Advanced Easing

T
he easing profile you choose can have a profound impact on the user experience of your interface. Duration of the easing you choose is just as important as the profile. To get out of the way of your user, keep the duration below 300ms; to slow down your user and make a point (on a portfolio website, for instance) you can increase duration well past 1 second.

Also note that perceived duration of the interaction is affected by the easing profile as well. (This is demonstrated well in the easing visualizer that I built.) Therefore, experiment with longer durations for profiles with more extreme easing, such as In Out Quad.

In order to demonstrate the role that easing profiles (and duration) play in interactions, I've compiled six real-world examples of accordion items, each with different easing profiles applied.

Example 1

Easing on open: Out Quad, 0.2s

Easing on close: In Quad 0.2s

‍

Example 2

Easing on open: Out Quint, 0.8s

Easing on close: Out Quint 0.8s

Example 3

Easing on open: Ease 0.8s

Easing on close: Ease 0.3s

Example 4

Easing on open: Expo 1

Easing on close: Expo 0.5

Example 5

Easing on open: Ease 0.25

Easing on close: Ease 0.25

Example 6

Easing on open: Ease In Out 0.3

Easing on close: Linear 0.3

For a more visual guide to easing, I've built an easing visualizer. View it here