Guidelines for page transition animations

Applies to Windows and Windows Phone

Use page transition animations to display the first page of a newly launched app, or to transition between pages within an app.

Note  When only a portion of the screen's content will change, use content transition animations rather than page transition animations.

Dos and don'ts

  • Split your page along natural borders or boundaries into a set of between two and five regions. Apply staggered timings to the regions so that the regions appear sequentially rather than all at once, and offset the regions by 100 pixels for a wide app layout. You can use a smaller offset if your app has a special layout for narrow state. For the most common page divisions and the order in which they should appear, see Additional usage guidance.
  • Make sure that any content that the outgoing and incoming pages have in common stays in place, without any animations applied to them. For example, if a Back button is present on both the outgoing and incoming page, it should not be included in the transition animation.
  • If the outgoing page does not have a Back button (such as an app's first page) but the incoming page does, the Back button should be specified as a separate region and that region should animate into view before any others.
  • If your outgoing and incoming pages have different backgrounds, use the fade in animation to show the new background. Start the fade in animation at the same time as the page transition animation.
  • If some of the content on the incoming page is not ready to display immediately, use the page transition animation to bring in as much content as is ready at that time. Meanwhile, if necessary, show a progress control while you ready the additional content. Once the additional content is ready to display, animate it into place based on its content area. For a large content area, use the content transition animation. For a small content area or discontinuous content, use the fade in animation.
  • Slide the page into the view against the general page flow or reading order. For example, if the content on the incoming page flows from left to right, then the incoming page should slide in from right to left. In apps with right-to-left reading order, the incoming page should slide in from left to right. Similarly, when you split a page into sections as described in the following illustrations, the order that those sections are brought into the view should be the opposite of the reading order.
  • Don't run page transition animations when a user resizes an app window. Page transition animations are only for navigating from one page to another within a specific view. The system handles the animation between the old and new layout when the view changes.

Additional usage guidance

The most common page divisions, including the order they should appear, are shown here:

Common page divisions

The most common page divisions, with back buttons, are shown here. If the outgoing page does not have a Back button (such as an app's first page) but the incoming page does, the Back button should be specified as a separate region and that region should animate into view before any others.

Common page divisions

The most common page divisions used with an app that is displayed in a narrow width or portrait view, and the order in which the divisions should appear, are shown here. If the Back button is already present on the outgoing page, it should stay in place, not included in the animation.

Common page divisions in resized or portrait view

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag animations
Guidelines for edge-based UI animations
Guidelines for fade animations
Guidelines for pointer click animations
Guidelines for reposition animations
Guidelines for pop-up UI animations
Guidelines for swipe animations
For developers (HTML)
HTML animation library sample
Animating your UI
Animating page transitions
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
For developers (XAML)
Animating your UI
Animating content and entrance transitions
Quickstart: Animating your UI using library animations
EntranceThemeTransition class

 

 

Show:
© 2014 Microsoft