Animating edge-based UI (HTML)

Use edge-based UI animations to show or hide UI that originates from the edge of the screen. Either the user or the app can bring this UI into view. These animations are mainly for use in custom controls; existing controls such as AppBar have library animations for edge UI built-in, and you'll get the animated behavior by simply including such controls in your UI.

The UI can either overlay the app or be part of the main app surface. If the UI is part of the main app surface, you might need to resize the rest of the app to make room for the new UI when it appears.

Basic diagram of an edge-based element

This set of animations consists of the following APIs:

There are two types of edge-based elements, each with their own set of animation APIs: edge UI and panel UI.

The following video demonstrates the animations that show and hide edge-based UI:

The following video demonstrates the animations that show and hide panels:

  • Use the edge UI animations with smaller edge-based UI if your intention is to animate a custom control that's similar in behavior to AppBar or similar. You might also want to define a UI surface/area for errors and warnings that come from actions in your app. If you're addressing that scenario, make sure you read Guidelines for flyouts; edge-based UI may not be appropriate for your scenario.
  • Use the panel UI animations with edge-based UI that is generally larger and covers more of the app window, such as the soft keyboard.

Illustration showing the difference in size between an edge UI and a panel UI

Important  The app bar control provided by Windows includes the edge UI animations. If you are using that control, you do not need to provide those animations yourself.

 

To use these animations, you'll need to know:

  • The object that will slide in or out.

  • The distance (offset) that the object will slide. This will be the final distance between the inner edge of the UI and the edge of the screen.

    Illustration of the measurement referred to as the offset

Edge-based animations in default Windows Runtime control behavior

The recommended way to include edge UI is by adding an AppBar, which will automatically apply all appropriate transitions and interaction behavior for you. For more info, see Adding app bars.

Flyout objects (Flyout, Menu, or SettingsFlyout), also have built-in animations, but they're not really edge-based UI. Flyouts are associated with the context that caused them to display, not with the edge of the app window. You might use flyouts for UI that's invoked from an AppBar, but again that's not pure edge UI. For more info, see Adding flyouts and Animating popup UI.

Other resources

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

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

Animating your UI

showEdgeUI

hideEdgeUI

showPanel

hidePanel