Windows Dev Center

Guidelines for pop-up UI 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.


  • Use pop-up animations to show or hide custom pop-up UI elements that aren't a part of the app page itself. The common controls provided by Windows already have these animations built in.
  • Don't use pop-up animations for tooltips or dialogs.
  • Don't use pop-up animations to show or hide UI within the main content of your app; only use pop-up animations to show or hide a pop-up container that displays on top of the main app content.

[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 edge-based UI animations
Guidelines for fade animations
Guidelines for page transitions animations
Guidelines for pointer click animations
Guidelines for reposition animations
For developers (XAML)
Animating your UI
Animating pop-up UI
Quickstart: Animating your UI using library animations
PopInThemeAnimation class
PopOutThemeAnimation class
PopupThemeTransition class
For developers (HTML)
HTML animation library sample
Animating your UI
Animating pop-up UI
WinJS.UI.Animation.showPopup function
WinJS.UI.Animation.hidePopup function



© 2015 Microsoft