Interfaces: Advanced Easing

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

The 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.