Animation patterns for Windows Store apps

Learn how to use purposeful animations to visually tie experiences together and tell a story. The Windows 8 scenario-specific animations are designed to convey information, help people know what to expect, and build a sense of confidence. See the detailed guidelines and how-to topics in the Animating your UI section.

Launch your app

Bring in the first page of your app.

JavaScript: Use enterPage

XAML: Use EntranceThemeTransition

See also Animating transitions with the Animations Library

Transition between pages

Transition from one page of your app to another page.

JavaScript: Use exitPage and then enterPage

XAML: Use EntranceThemeTransition

See also Animating transitions with the Animations Library

Transition between contents

Transition the contents of an area within your page.

JavaScript: Use exitContent and then enterContent

XAML: Use ContentThemeTransition

See also Animating transitions with the Animations Library

Touch and click feedback

Show visual feedback that the user has touched or clicked on a tile.

JavaScript: Use pointerDown and pointerUp

XAML: Use PointerDownThemeAnimation and PointerUpThemeAnimation

See also Animating pointers with the Animation Library

Show transient UI or controls

Show and hide transient UI or controls.

JavaScript: Use fadeIn and fadeOut

XAML: Use FadeInThemeAnimation and FadeOutThemeAnimation

See also Animating UI elements with the Animation Library

Refresh

Refresh contents or animate a layout change of the existing page.

JavaScript: Use crossFade

XAML: Use FadeOutThemeAnimation and FadeInThemeAnimation

See also Animating UI elements with the Animation Library

Show additional controls or content inline

Make room and show additional controls or content within your existing UI.

JavaScript: Use createExpandAnimation and createCollapseAnimation

XAML: N/A

Add or delete items from a list

Add or delete one or more items from an existing list.

JavaScript: Use createAddToListAnimation and createDeleteFromListAnimation

XAML: Use AddDeleteThemeTransition

See also Animating lists and list items with the Animation Library

Filter a list while searching

Add or delete many items from a list quickly when searching.

JavaScript: Use createAddToSearchListAnimation and createDeleteFromSearchListAnimation

XAML: N/A

See also Animating lists and list items with the Animation Library

Show a command or message bar

Show and hide a command or message bar at the edge of the screen.

JavaScript: Use showEdgeUI and hideEdgeUI

XAML: Use EdgeUIThemeTransition

See also Animating UI surfaces with the Animation Library

Show a task pane

Show and hide a task pane or other large UI container from the edge of the screen.

JavaScript: Use showPanel and hidePanel

XAML: Use PaneThemeTransition

See also Animating UI surfaces with the Animation Library

Show pop-up UI

Show and hide pop-up UI such as a flyout or context menu.

JavaScript: Use showPopup and hidePopup

XAML: Use PopInThemeAnimation and PopOutThemeAnimation

See also Animating UI surfaces with the Animation Library

Drag

Drag items to reorder a list.

JavaScript: Use dragSourceStart, dragSourceEnd, dragBetweenEnter, and dragBetweenLeave

XAML: Use DragItemThemeAnimation, DropTargetItemThemeAnimation, and DragOverThemeAnimation

See also Animating lists and list items with the Animation Library

Swipe-select a tile

Animate a tile back to its rest position after the user has performed a swipe gesture.

JavaScript: Use swipeSelect and swipeDeselect

XAML: Use SwipeBackThemeAnimation

Reveal ability to swipe

Animate to indicate that a tile supports the swipe gesture.

JavaScript: Use swipeReveal

XAML: Use SwipeHintThemeAnimation

Update a tile

Update all content on a tile, or peek to temporarily show additional information on the tile.

JavaScript: Use createPeekAnimation

XAML: N/A

Update a badge

Update a numerical badge with a new value.

JavaScript: Use updateBadge

XAML: N/A

Reposition

Reposition UI or content.

JavaScript: Use createRepositionAnimation

XAML: Use RepositionThemeTransition

See also Animating UI elements with the Animation Library

Related topics

UX guidelines for Windows Store apps

Animating your UI

 

 

Build date: 9/2/2013