Cards Colour Flags Focus states Grammar and style Icons Illustration  Logo Markup Mission Padding Photography Promo assets  Radius Size Spacing Tapestries  Tone of voice Transitions When to use 
and typesUpwardsSidewaysmodalsbottom sheetsBest practicesTypography Vocabulary
Design at Wise Foundations Components Patterns Resources
Transitions

Transitions occur when users move between screens starting a new flow or navigating within a journey. They help users navigate through the app creating a sense of continuation. These transitions should always be unobtrusive and natural.

A mosaic of images showing different types of transitions
When to use 
and types

Currently, we support two main kinds of page transitions

  • Upwards

  • Sideways

And two supplementary modals transitions

  • Modals

  • Bottom sheets

Animation
Upwards

Indicate the start of a new action. Use it for the opening of a new flow like Send or Request Money.

Animation of screens moving sideways
Sideways

Indicate the continuation of a flow. Use it for consecutive pages within the same flow.

Modal animation
Modal

Use it as a quick supplementary task like selectors or filters during an activity, it should always be dismissible.

Bottom sheet animation
Bottom Sheet

Use it as a small supplementary action or content display during a flow or activity.

Upwards

This pattern indicates the start of a new flow/action in the app, such as send or receive money. Its purpose is to communicate that a new user journey or action starts from that point. It must always contain a dismissal button on its top left corner.

Layered animation of screens coming bottom to top

Upcoming screen comes in from the bottom fully covering the previous screen.

Animation of screen coming from the bottom
IOS

Screen slides in from the bottom

Animation of screen coming from the bottom
Android

Screen slides in from the bottom

Sideways

This pattern indicates the continuation of a flow whenever an action has already been started. It allows the user to navigate forward and backward between pages at consecutive levels within the same hierarchy.

Layered animation of screens moving sideways
Sideways are lateral transitions used for consecutive screens on the same hierarchy level
Sideway animation
IOS

On IOS an overlay is shown below the upcoming page

Sideways animation
Android

Android doesn’t use overlay

Animation of screens moving sideways on a browser
Web

On web the content moves from forward to backward and disappears quickly with a transparency effect.

modals

A Modal is a container to display supporting content such as selectors or a short supplementary task on mobile experiences and it should always have a dismiss button on the top left corner For more information on this topic, check the Modals page on Components section.

Animated layers of UI with a modal covering the content

A modal is an overlay that interrupts the user’s task to show an important message, disabling the rest of the screen.

Animation of a modal sliding in from bottom of screen
IOS

On IOS a full page bottom sheet is available and recommended to be used for selectors and single page actions.

Animation of a screen sliding in from bottom covering the content
Android

Bottom sheets are displayed as full pages but serve the same purpose as IOS.

bottom sheets

A bottom sheet is a container you can use to display supporting content or a short, supplementary task on mobile and web experiences, also known as Modals or Pop-ups. For more information on this topic, check the Bottom Sheets page on Components section.

Layered animation of a small container displaying content

Bottom Sheets supports supplementary tasks on mobile and web experiences.

Animation of a Bottom sheet
IOS
Animation of a bottom sheet
Android
Animation of a bottom sheet on a web browser
Web

Container comes in from the bottom and disappears with a fade when dismissed.

Best practices
Animation of several bottom sheets overlapping each other
3 mobile screens simulating a Figma file with descriptions of each transition between them

Designers should always specify which kind of transition should be used when handing off flows to Engineers.

Sequence of screens navigation using different transitions
Archived copy · notes