Guidelines and checklist for page transition animations (Windows Store apps) (Windows)

This topic has not yet been rated - Rate this topic

In this article

Appropriate use of page transitions
Checklist
Related topics

This topic describes best practices for page transition animations.

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

Appropriate use of page transitions

Split the incoming page into regions

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.

When your app transitions between pages, any content that the outgoing and incoming pages have in common should stay 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 the first page shown) 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.

Splitting page content in Snap and Portrait views

The most common page divisions used with an app that is displayed in Snap or Portrait views, 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.

Do not run page transition animations when an app transitions into or out of Snap or Portrait view. 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.

Fade between different page backgrounds

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.

Use the page transition animation only for content that is ready to display

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.

Reading order considerations

Slide the page into the view against the general page flow or reading order. For instance, if the content in 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 above, the order that those sections are brought into the view should be the opposite of the reading order.

Checklist

For general Windows Store requirements, see Certification requirements for Windows apps.

Guidelines and checklist for page transition animations (Windows Store apps)