Guidelines for animations

Applies to Windows and Windows Phone

Purposeful, well-designed animations bring apps to life and make the experience feel crafted and polished. Help users understand context changes, and tie experiences together with visual transitions.

In this section


Animations for add and delete

List animations enable you to insert or remove single or multiple items from a collection, such as a photo album or a list of search results.

Animations for content transitions

Content transition animations enable you to change the content of an area of the screen while keeping the container or background constant. New content fades in. If there is existing content to be replaced, that content fades out.

Animations for drag

Use drag-and-drop animations when users move objects., such as moving an item within a list, or dropping an item on top of another.

Animations for edge-based UI

Edge-based animations show or hide UI that originates from the edge of the screen.

Animations for fade

Use fade animations to bring items into a view or take them out of a view. There are three types of fade animations: fade in, fade out, and crossfade.

Animations for page transitions

Use page transition animations to display the first page of a newly launched app, or to transition between pages within an app.

Animations for pointer click

Use pointer animations to provide users with visual feedback of a tap or click on an item. The pointer down animation is played when a user taps or clicks on an item. The animation slightly shrinks the item to indicate that it is pressed. The pointer up animation is played when the tap or click is released. This animation restores the item to its original size, to indicate that it has been released.

Animations for reposition

Use the reposition animation to move an element or elements into a new position.

Animations for pop-up UI

Use pop-up animations to show and hide pop-up UI, which includes context menus and flyouts. Pop-up elements are containers that appear over the app's content and are dismissed if the user taps or clicks outside of the pop-up element.

Animations for swipe

Use swipe animations when you implement the swipe gesture for selection of an item.




© 2014 Microsoft