Animating pop-up UI (HTML)

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. These animations are mainly for use on custom controls. The Flyout and Menu controls include the pop-up animations. If you use these controls in your app, you do not need to provide those animations yourself.

This set of animations consists of the following APIs:

The following video demonstrates the animations that show and hide pop-up UI:

The showPopup animation includes a translation, which is a vertical movement from an initial position to the final position as the pop-up element fades in. The translation distance and direction is specified by the app. In most cases, the translation should be 50 pixels, moving in an upwards direction. However, if the pop-up element is displayed below the UI element that triggered the pop-up, then the translation should be 50 pixels, moving downwards. For example, this downward translation would apply to a flyout triggered from a navigation bar or from an app header. This is meant to give the user a visual link between the pop-up element and its triggering element.

To use the pop-up animations, you'll need to know the object that will appear or disappear and, in the case of showPopup, the offset from which the object will move while it appears.

Other resources

For code examples that demonstrate the use of the pop-up UI animation APIs, see the HTML animation library sample.

For design best practices in the use of these animations, see Guidelines and checklist for pop-up UI animations.

Animating your UI

Animating edge-based UI