Motion for UWP apps

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.

Benefits of animation

Animation is more than making things move. Animation is a tool for creating a physical ecosystem for the user to live inside and manipulate through touch. The quality of the experience depends on how well the app responds to the user, and what kind of personality the UI communicates.

Make sure animation serves a purpose in your app. The best Universal Windows Platform (UWP) apps use animation to bring the UI to life. Animation should:

  • Give feedback based on the user's behavior.
  • Teach the user how to interact with the UI.
  • Indicate how to navigate to previous or succeeding views.

As a user spends more time inside your app, or as tasks in your app become more sophisticated, high-quality animation becomes increasingly important: it can be used to change how the user perceives their cognitive load and your app's ease of use. Animation has many other direct benefits:

  • Animation adds hints towards interaction.

    Animation is directional: it moves forward and backward, in and out of content, leaving minimal "breadcrumb" clues as to how the user arrived at the present view.

  • Animation can give the impression of enhanced performance.

    When network speeds lag or the system pauses to work, animations can make the user's wait feel shorter.

  • Animation adds personality.

    The well-considered Windows Phone UI uses motion to create the impression that an app is concerned with the here and now, and helps counteract the sensation that the user is burrowing into nested hierarchies.

  • Animation adds consistency.

    Transitions can help users learn how to operate new applications by drawing analogies to tasks that the user is already familiar with.

  • Animation adds elegance.

    Animations can be used to let the user know that the phone is processing, not frozen, and it can passively surface new information that the user may be interested in.

In this section

Animation type Description
Add and delete List animations let you insert or remove single or multiple items from a collection, such as a photo album or a list of search results.
Drag and drop 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.
Edge Edge-based animations show or hide UI that originates from the edge of the screen. The show and hide actions can be initiated either by the user or by the app. The UI can either overlay the app or be part of the main app surface. If the UI is part of the app surface, the rest of the app might need to be resized to accommodate it.
Fade Use fade animations to bring items into a view or to take items out of a view. The two common fade animations are fade-in and fade-out.
Pointer Pointer animations provide users with visual feedback when the user taps on an item. The pointer down animation slightly shrinks and tilts the pressed item, and plays when an item is first tapped. The pointer up animation, which restores the item to its original position, is played when the user releases the pointer.
Pop-up animations Use pop-up animations to show and hide pop-up UI for flyouts or custom pop-up UI elements. 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.
Reposition Move elements into a new position.