Slide Transition

Best Practice · Last modified July 15, 2009

When you want to display new content on the page and would like to communicate how the new content relates to other items on the page, provide transitional effects to animate a slide effect.

Make the slide happen quickly (usually this means in less than half a second), and end the animation end by slowing down during the last few frames to give the impression that the new object is attaching itself to an area of the page.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page.

When to Use This Pattern

  • In place of popup window to avoid having the user have to manage an additional window.
  • The content being revealed is strongly associated with another area on the page (the content is attached to another area).
  • Editing configuration about an item.

What's the Solution?

  • Provide a way to toggle the slide effect (slide in/slide out).
  • Provide transitional effects to animate the slide effect (both in and out). See the Animate pattern.
  • Make the slide happen quickly (usually this means in 0.25 - 0.5 seconds.)
  • Have the animation end by slowing down during the last few pixels of animation (creating the feeling that something is keeping it attached to another area on the page.

Why Use This Pattern?

  • Slide is a variation of move where the object is constrained to move either horizontally or vertically (but not both) and is usually anchored with another object. A classic example is a drawer-slide out. In the Mac OSX, the Finder's column view uses a slide transition to bring the contents of subfolders into view.
  • Slide retains a strong relationship to the object it slides out from. Menus that slide down are seen as being part of the menu system. Configuration drawers that slide out from the side of a window are seen as coming from the inside of the window and there is no confusion about it being associated with it.

For more information, see the rationale for Transition patterns.


See the general discussion about accessibility for Transition patterns.