Animations for edge-based UI

Guidelines for edge-based UI animations

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.


  • Use edge UI animations to show or hide a custom message or error bar that does not extend far into the screen.
  • Use panel animations to show UI that slides a significant distance into the screen, such as a task pane or a custom soft keyboard.
  • Slide the UI in from the same edge it will be attached to.
  • Slide the UI out to the same edge it came from.
  • If the contents of the app need to resize in response to the UI sliding in or out, use fade animations for the resize.
    • If the UI is sliding in, use a fade animation after the edge UI or panel animation.
    • If the UI is sliding out, use a fade animation at the same time as the edge UI or panel animation.
  • Don't apply these animations to notifications. Notifications should not be housed within edge-based UI.
  • Don't apply the edge UI or panel animations to any UI container or control that is not at the edge of the screen. These animations are used only for showing, resizing, and dismissing UI at the edges of the screen. To move other types of UI, use reposition animations.

    Illustrates when to use edge UI or panel animations and when to use reposition.

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag animations
Guidelines for fade animations
Guidelines for page transitions animations
Guidelines for pointer click animations
Guidelines for reposition animations
Guidelines for pop-up UI animations
For developers (XAML)
Animations overview
Animating edge-based UI
Quickstart: Animating your UI using library animations
EdgeUIThemeTransition class
PaneThemeTransition class
Animating fades
Animating repositions
For developers (HTML)
HTML animation library sample
showEdgeUI function
hideEdgeUI function
showPanel function
hidePanel function
Animating fades
Animating repositions



© 2016 Microsoft