Collapse Transition

Best Practice · Last modified July 15, 2009

To communicate that an object is no longer of primary importance while still keeping it available in a less obtrusive form, rapidly shrink the object while animating the in-between sizes (also known as tweening).

Use this patterns when the user no longer needs to see detail to interact with content, when you want to minimize visual clutter but still keep the object available in a minimized form for easy recall.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form.

When to Use This Pattern

  • A photo in a collection is no longer the focused-on photo.
  • The user longer needs to see detail.
  • The user longer needs to interact with content.
  • You want to keep the object around for later focus.
  • You to reduce clutter or visual noise.

What's the Solution?

  • Decrease the size of an object while animating the in-between sizes (tweening).
  • Shrink should happen very quickly. A good rule of thumb is complete a shrink or expand in less than 0.5 seconds.

Why Use This Pattern?

  • Collapsing preserves real estate on the screen. The downside is that its content is either un-readable or less readable.
  • Collapse is visually more eye-catching than a Dim Transition, especially when combined with the move transition. Movement is more easily detected in the peripheral than color changes.

For more information, see the rationale for Transition patterns.


  • Set the focus on the collapsed item. This enables assistive technologies to detect where the collapsed area is.
  • Provide ALT tags that preview what will happen when the user wants to expand the area again.
  • See the general discussion about accessibility for Transition patterns.