Guidelines for pop-up UI animations

Applies to Windows and Windows Phone

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.

Appropriate use of pop-up animations

  • Use pop-up animations to show or hide custom pop-up UI elements, such as a context menu, a flyout, or other contextual UI that not a part of app page itself. The recommended distance for the pop-up element to move as it appears is 50 pixels. The common controls provided by Windows already have these animations built in.
  • Don't use pop-up animations for tooltips or dialogs. Use the fade animations to show and hide custom tooltips or dialogs.
  • Don't use pop-up animations to show or hide UI within the main content of your app. Use pop-up animations only to show or hide a pop-up container that displays on top of the main app content.

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag animations
Guidelines for edge-based UI animations
Guidelines for fade animations
Guidelines for page transitions animations
Guidelines for pointer click animations
Guidelines for reposition animations
Guidelines for swipe animations
For developers (Windows Runtime apps using JavaScript and HTML)
HTML animation library sample
Animating your UI
Animating pop-up UI
WinJS.UI.Animation.showPopup function
WinJS.UI.Animation.hidePopup function
For developers (Windows Runtime apps using C#/VB/C++ and XAML)
Animating your UI
Animating pop-up UI
Quickstart: Animating your UI using library animations
PopInThemeAnimation class
PopOutThemeAnimation class
PopupThemeTransition class

 

 

Show:
© 2014 Microsoft. All rights reserved.