Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



View Source | Submit Feedback

Animations

Asymmetric Animation Timing

Asymmetry to your animation durations aids your user experience by allowing you to express personality while at the same time responding quickly to user interactions. It also provides contrast to the feel, which makes the interface more visually appealing.

TL;DR

  • Use asymmetric animation timing to add personality and contrast to your work.
  • Always favor the user's interaction; use shorter durations when responding to taps or clicks, and reserve slower durations for times where you aren't.

Like most “rules” of animation, you should play around to find out what works for your application, but when it comes to the user experience aspects, users are notoriously impatient. The rule of thumb is to always respond to a user interaction quickly . That said, most of the time the user’s action is asymmetric, and therefore so can the animation be.

For example, when a user taps to bring on a sidebar navigation, you should bring that on to screen as quickly as possible, with a duration of around 100ms. When the user dismisses the menu, however, you can afford to animate the view out a little more slowly, say around the 300ms mark.

By contrast, when you bring on a modal view, this is normally to display an error or some other critical message. In such cases you will want to bring on the view a little more slowly, again around the 300ms mark, but dismissal, which is triggered by the user, should happen very quickly.

The general rule of thumb, then, is:

  • For UI animations triggered by a user’s interaction, such as view transitions or showing an element, have a fast intro (short duration), but a slow outro (longer duration).
  • For UI animations triggered by your code, such as errors or modal views, have a slower intro (longer duration), but a fast outro (short duration).

Next Sections

  1. CSS vs JavaScript Animations
  2. The Basics of Easing
  3. Custom Easing
  4. Animating Between Views
  5. Choosing the Right Easing
  6. Animating Modal Views
  7. Asymmetric Animation Timing
  8. Animations and Performance

Updated on 2014-08-08

Authors

Paul Lewis

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .