Guidelines for page transition animations
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.
- 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.
The most common page divisions, including the order they should appear, are shown here:
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.
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.
- 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
- HTML animation library sample
- Animating your UI
- Animating page transitions
- WinJS.UI.Animation.enterPage function
- WinJS.UI.Animation.exitPage function
- For developers (Windows Runtime apps using C#/VB/C++ and XAML)
- Animating your UI
- Animating content and entrance transitions
- Quickstart: Animating your UI using library animations
- EntranceThemeTransition class