Fade Out Transition

Best Practice · Last modified July 15, 2009

When an object is being removed from the user's interface, fade the object until it disappears to communicate the transition.

Animate the fade-out by diminishing the opacity from its normal value down to full transparency (0% opacity), which is to say invisibility.

This communicates that the object is no longer available, that it "went away," as the user has literally seen it leaving, while making it clear the precise location from where the object was removed.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer needs to communicate that an object is going away.

When to Use This Pattern

  • Removing a content module from a page.
  • Removing objects from a container.
  • Creating a strong association of where an object is removed from.
  • Need to signal something got removed that is not part of the user's main focus.
  • The removal of content is done by the system.
  • In conjunction with Self-Healing Transition.
  • In conjunction with Cross Fade Transition.

What's the Solution?

  • Diminish the opacity of an object from its normal value down to transparent (0% opacity.) This communicates:
    • The object is no longer available (common for delete).
    • A stronger impression (due to the transition) that the object went away (the user saw it leaving).
    • Where the object was removed from.

Fade Speed

  • Because fades do not catch the eye as strongly as move transitions, a fade can last a little longer.
  • The general rule is that fades should not take longer than a second, with the normal time being between 0.25 - 0.5 seconds. If the fade is associated with new information coming in that is not normally in the user's focus, you might want the fade to be a little faster in order to catch their eye. However if, the fades are happening in the main area of focus, the transitions can be slower.
  • A slow fade does not catch the user's attention as much as a fast fade. Therefore use a slow fade for items being added or shown to the user that are not centrally important.
  • A fast fade should be used when it might be more important to catch the user's attention.
  • Depending on the underlying animation library and the individual machine's performance the fade effect may not be a smooth as anticipated.

Why Use This Pattern?

  • A fade can help slow time down. Instead of something happening instantly, a fade can slightly slow down the interaction letting the user know what happened.
  • In addition, since fades are less noticeable than a move animation, they are good for indicating less important changes.

For more information, see the rationale for Transition patterns.


See the general discussion about accessibility for Transition patterns.