Cross Fade Transition

Best Practice · Last modified July 15, 2009

When a new view of an object is replacing the previous view of the same object, use a cross-fade transition to cue the user to the change.

To effect a cross-fade, overlay two content areas, with the area representing the initial state visible and the other invisible.

Fade out the visible content area while at the same time fading in the previously hidden area.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

Designer wants to communicate that a new view of an object is replacing the previous view of the object.

When to Use This Pattern

  • Switching to edit the configuration of a panel or module of content.
  • You need to soften a change in context.
  • You want to create an aesthetic effect.
  • You need to call attention to a change in views.

What's the Solution?

  • Two content areas are overlaid.
  • One content is area is made visible; the other invisible.
  • Fade out the visible content area while at the same time fade in the previously hidden area.
  • Reverse the fades to switch back to the previous view.
  • Use the alpha (opacity) channel to accomplish fade in and fade out. See the Fade Out and Fade In patterns.

You can see an example of this with the Rico weather widget. In this example, the cross fade is used to move between the configuration panel and the content panel.

Why Use This Pattern?

  • This is a common video editing technique that communicates one scene flows into another scene.
  • The effect is heightened when fading between two different types of content. For example, it is a convenient way to switch between configuration and content.

For more information, see the rationale for Transition patterns.

Accessibility

  • Use focus to direct the assistive technology to the new item faded in. For example, if you are switching between a content module and a configuration faceplate, set the focus on the first field in the configuration faceplate. This will allow the assisitive technology to read the change.
  • See the general discussion about accessibility for Transition patterns.