Animating your UI (HTML)
You can integrate the Windows 8 look and feel into your Windows Store app by using the Animation Library suite of Windows-provided animations. This article provides a summary of the animations and examples of typical scenarios handled by the Animation Library.
Use of the Animation Library animations provides these benefits:
- Motions that align to Windows Store app animation principles
- Fast, fluid transitions between UI states that inform but do not distract the user
- Clearer visuals to show the user transitions within an app
For example, when the user adds an item to a list, instead of the new item instantly appearing in the list, the new item animates into place and the other items in the list animate to their new positions, making room for the added item. This makes the action clear to the user in a way that instantaneous transitions do not.
Note that controls introduced in Windows 8 such as the ListView control, the FlipView control, the Flyout control, and the AppBar control all use the Animation Library animations. By using these controls in your app, you can get the Windows Store app animations look and feel without programming it yourself.
The Animation Library does not provide animations for every possible scenario and there are cases where you might wish to create a custom animation to reflect your brand. You should be thoughtful about where you diverge from the Animation Library animations. Only do so if there is a well-defined reason, such as for a special brand moment or if there is no Animation Library animation to suit the scenario.
For example code using the APIs discussed in this topic, see the HTML animation library sample.
Animations available in the library
The following animations are supplied in the Animation Library. Click on the name of an animation to learn more about their main usage scenarios, the functions that execute them, and to see an example of the animation.
- Page transition: Animates the contents of a page into or out of view.
- Content transition: Animates one piece or set of content into or out of view.
- Fade in/out: Shows transient elements or controls.
- Crossfade: Refreshes a content area.
- Pointer up/down: Gives visual feedback of a tap or click on a tile.
- Expand/Collapse: Shows additional inline information.
- Reposition: Moves an element into a new position.
- Show/Hide popup: Displays contextual UI on top of the view.
- Show/Hide edge UI: Slides edge-based UI into or out of view.
- Show/Hide panel: Slides large edge-based panels into or out of view.
- Add/Delete from list: Adds or deletes an item from a list.
- Add/Delete from search list: Adds or deletes an item from a list when filtering search results.
- Peek: Updates the contents of a tile.
- Badge update: Updates a numerical badge.
- Start/End a drag or drag-between: Gives visual feedback during a drag-and-drop operation.
- Swipe hint: Hints that a tile supports the swipe interaction.
- Swipe select/deselect: Transitions a tile to a swipe-selected state.
Page transition
Page transitions animate the contents of a page into or out of a view. This includes both showing the first page of the app after the splash screen, and transitioning between the pages of an app.
The following video demonstrates the animation that brings a page of content into view:
The following video demonstrates the animations that transition between two pages of content:
For more information on UX and usage guidance, see Guidelines and checklist for page transition animations.
Use these APIs to execute this animation in JavaScript code:
Content transition
Use content transition animations to move a piece or a set of content into or out of the current view. Do not confuse content transitions, which involve elements on a page, with page transitions, which transition entire pages. For example, the content transition animations are used to show content that was not ready to display when the page was first loaded, or when changing the content of a section of a page.
The following video demonstrates the animations that remove existing content and then bring new content into view:
For more information on UX and usage guidance, see Guidelines and checklist for content transition animations.
Use these APIs to execute this animation in JavaScript code:
Fade in/out
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction. Another example is a transient scroll bar or panning indicator that is faded out after no user input has been detected for some amount of time. Apps should also use the fade in animation when they transition from a placeholder item to the final item as content loads dynamically.
The following video demonstrates the animations that fade content into and out of view. Note the scroll bar that fades in and out at the bottom of the screen:
For more information on UX and usage guidance, see Guidelines and checklist for fade animations.
Use these APIs to execute this animation in JavaScript code:
Crossfade
Use a crossfade animation to smooth the transition when an item's state is changing; for instance, when the app refreshes the current contents of a view.
The following video demonstrates the crossfade animation:
For more information on UX and usage guidance, see Guidelines and checklist for fade animations.
JavaScript: Use this APIs to execute this animation:
Pointer up/down
Use the pointer up and pointer down animations to give the user feedback for a successful tap or click on a tile. For example, when a user clicks or taps down on a tile, the pointer down animation is played. Once the user releases the click or tap, the pointer up animation is played.
The following video demonstrates the pointer down and pointer up animations:
For more information on UX and usage guidance, see Guidelines and checklist for pointer animations.
Use these APIs to execute this animation in JavaScript code:
Expand/Collapse
Use the expand animation to add extra space in the content of the view to show additional inline information. For example, the appearance of an error message causes other content in the view to move to make room for it. The collapse animation hides this additional content, to show fewer details about a particular item. The collapse animation is usually triggered by a user action.
The following video demonstrates the expand and collapse animations:
Use these APIs to execute this animation in JavaScript code:
Reposition
Use the reposition animation to move an element into a new position. For example, moving the headers in a panorama view would utilize the reposition animation.
The following video demonstrates the reposition animation:
For more information on UX and usage guidance, see Guidelines and checklist for the reposition animation.
JavaScript: Use this APIs to execute this animation:
Show/Hide pop-up UI
Use the show and hide pop-up UI animations to display or hide contextual UI on top of the current view. For example, a pop-up UI can show more detailed information about an item in an element. Use the show and hide pop-up UI animations when you show a custom context menu or flyout.
The following video demonstrates the animations that show and hide popup UI:
For more information on UX and usage guidance, see Guidelines and checklist for pop-up UI animations.
Use these APIs to execute this animation in JavaScript code:
Show/Hide edge UI
Use the show and hide edge UI animations to slide small, edge-based UI into and out of view. For example, use these animations when you show a custom app bar at the bottom of the screen or a UI surface for errors and warnings at the top of the screen.
The following video demonstrates the animations that show and hide edge-based UI:
For more information on UX and usage guidance, see Guidelines and checklist for edge-based animations.
Use these APIs to execute this animation in JavaScript code:
Show/Hide panel
Use the show and hide panel animations to show and hide a panel, which is large edge-based UI such as a custom keyboard or a task pane. Do not confuse these animations with the show and hide edge UI animations, which are used with small UI elements that make use of the edge as entry and exit points.
The following video demonstrates the animations that show and hide panels:
For more information on UX and usage guidance, see Guidelines and checklist for edge-based animations.
Use these APIs to execute this animation in JavaScript code:
Add to/Delete from list
Use the add to and delete from list animations when you add or delete an item in an existing one-dimensional or two-dimensional list. The add to list animation first repositions existing items in the list to make space for the new items, and then adds the new items. The delete from list animation removes items from a list and, if necessary, repositions the remaining list items once the deleted items have been removed.
The following video demonstrates the animations that add and remove items from a list:
For more information on UX and usage guidance, see Guidelines and checklist for list animations.
Use these APIs to execute this animation in JavaScript code:
Add to/Delete from search list
Use the add to and delete from search list animations when items in a list change quickly during a search. Note that the search list animations are faster than the standard list animations. For example, when a user enters a search term and the list filters the results in real time, the items that are filtered out should use the delete from search list animation. Conversely, a user may search for a string and then backspace to remove a character. This results in items being added back to the list of search results, so you should use the add to search list animation to do so.
The following video demonstrates the animations that add and remove items from a search list:
For more information on UX and usage guidance, see Guidelines and checklist for list animations.
Use these APIs to execute this animation in JavaScript code:
Peek
Use the peek animation to update a tile when the tile alternates between showing a picture and showing text, when the tile height is not large enough to show both at the same time. Also use this animation to cycle through a set of pictures on a tile.
The following video demonstrates the peek animation:
JavaScript: Use this APIs to execute this animation:
Badge Update
Use the badge update to update badges that display a number. For example, a mail app that shows the number of unread e-mails can use the badge update animation to update this value.
The following video demonstrates the animation that updates a badge:
JavaScript: Use this APIs to execute this animation:
Drag start/end and Drag between enter/leave
Use the drag animations to give visual feedback when the user drags or drops an item. Use the drag start animation when a user begins to drag an item. Use the drag end animation when the user drops the item.
Optionally, you can use the drag between enter and leave animations to show the user that the list can be rearranged around a dropped item. It is helpful for users to know where the item will be placed in a list if it is dropped at the current location. The drag between enter and drag between leave animations give visual feedback that an item being dragged can be dropped between two other items in the list, and that those items will move out of the way.
The following video demonstrates the animations associated with a drag-and-drop operation:
For more information on UX and usage guidance, see Guidelines and checklist for drag-and-drop animations.
Use these APIs to execute this animation in JavaScript code:
Swipe hint
Use the swipe hint animation to show that a tile supports the swipe interaction. Users can swipe downwards to select a tile. If a user does not know if they can swipe on a tile, a press and hold gesture on the tile will play the swipe hint animation to suggest that the user should interact with the tile through a swipe.
The following video demonstrates the swipe animation:
JavaScript: Use this APIs to execute this animation:
Swipe select/deselect
Use the swipe select animation when an item has been selected using the swipe interaction, to show that the tile has transitioned to a selected state and to return the tile to its rest location. Use the swipe deselect animation when a selected tile is deselected using a swipe gesture.
The following video demonstrates the swipe select and deselect animations:
Use these APIs to execute this animation in JavaScript code:
Using animations with custom controls
The following table summarizes our recommendations for which animation you should use when you create a custom version of these system controls:
| UI type | Recommended animation |
|---|---|
| Dialog box | fadeIn and fadeOut |
| Flyout | showPopup and hidePopup |
| Tooltip | fadeIn and fadeOut |
| Context menu | showPopup and hidePopup |
| Command bar | showEdgeUI and hideEdgeUI |
| Task pane or edge-based panel | showPanel and hidePanel |
| Contents of any UI container | enterContent and exitContent |
| For controls or if no other animation applies | fadeIn and fadeOut |