How will motion design change your user interface

Animations for edge-based user interface elements

  • 2 minutes to read

Edge-based animations show or hide UI elements that extend from the edge of the screen. The show and hide actions can be initiated by the user or the app. The UI elements can overlay the application or be part of the main interface of the app. If the UI element is part of the app's interface, you may need to resize the rest of the app accordingly.

Important APIs : edgeuidermetransition class

Recommended and non-recommended practices

  • Use edge user interface animations to show or hide a custom message or error bar that does not extend far into the screen.

  • Use panel animations to display user interfaces that extend far into the screen, such as a task area or a custom on-screen keyboard.

  • Slide the UI in from the same edge it is connected to.

  • Slide the UI out on the same edge it came in from.

  • If the app's content needs to be resized due to the user interface sliding in or out, use fade-in and fade-out animations.

    • When the UI slides in, use a fade-in or fade-out animation after the edge UI or panel animation.
    • When the user interface slides out, use a fade in or out animation at the same time as the edge user interface or panel animation.
  • Do not apply these animations to notifications. Notifications should not be in the edge-based user interface.

  • Do not apply edge UI or panel animation to UI containers or controls that are off the edge of the screen. These animations are only used for showing and closing user interfaces at the edge of the screen and for changing their size. To move other types of user interfaces, use the repositioning animations.

Related articles

For developers

Is this page helpful?