Why Your UI Animations Should Be Asymmetric
Animation is a powerful tool for adding personality and visual contrast to a web experience. But applying the same timing rules to every transition can weaken the user experience. Asymmetric animation timing acknowledges that not all animations serve the same purpose, offering a way to make our interfaces more engaging while keeping them responsive to user input.
The key principle is to treat user-triggered actions differently from system-triggered ones. When a user interacts with an interface, they expect immediate feedback. Dragging an element, toggling a menu, or closing an error message should feel direct and snappy. This calls for shorter durations, typically around the 100ms mark.
However, you often have more latitude when the interface initiates the change. Since the user isn't waiting for a direct response, you can use this time to express the app's unique feel. These animations can be slower, often around the 300ms mark, giving them a more deliberate and polished feel. This timing contrast itself is what creates visual appeal.
Two Scenarios, Two Timelines
To apply this concept, you can define a rule of thumb based on who or what triggers the animation:
- When following the user's action: (e.g., tap to open a sidebar). Make the intro fast, but you can afford a longer, slower outro.
- When initiated by your code: (e.g., showing a modal with a critical error). Use a slower intro to draw attention, but when the user takes action to dismiss it, animate it out quickly.
Have a look at the sidebar element in the following example, and note its transition-duration values:
This timeline conforms to the rules for user-initiated interactions: the initial appearance is quick, and the dismissal is slow.
