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
Build date: 9/2/2013