Transitions

Transitions guide users through their journey, maintaining continuity whether navigating between screens or within a single view. These fluid movements enhance understanding of app functionality and deliver smooth user experiences.Consistent transition patterns are essential for similar functions.  Our recommendation is to use native Android & iOS transition styles and patterns.

Flow navigation Forward and Backward

  • A horizontal sliding transition indicates moving forward or backward in the active flow, which signifies continuation or regression within the same hierarchy.
  • iOS uses a parallax effect, where the background moves more slowly than the foreground as screens slide.
  • Android applies a fade effect as screens slide.

Modal navigation Bottom sheet

  • A vertical sliding transition is commonly used for containers like bottom sheets or full modals, allowing for the display of supporting content or brief supplementary tasks. We recommend using the native styles for Android and iOS to ensure a consistent, platform-specific experience.
  • iOS and Android components slide on and off screen without changing shape.

Modal navigation Full sheet

  • "Full sheet” is used as a container that display supporting content and detailed information without losing the context of the previous screen.
  • Used in iOS system with the vertical sliding transition along with an animation of zoom out of the current screen that takes place in the background.
  • For Android use similar patterns as in Bottom sheet transition.

Navigation with Segmented Tabs

  • Segmented tab navigation help us to organise similar content under separate sections.
  • It improves usability by allowing users to quickly switch views or filter content.
  • iOS use a quick fade out animation and quick loading of new content.
  • Android use lateral transitions, by sliding content horizontally.

Main “Top Level” navigation

  • Transitions between top main screens or sections that doesn't requiring the strong visual link between screens.
  • The transition of the current screen is quickly fades out, followed by a fade-in of the new screen.
  • Recommendation is to use native iOS or Android patterns.

Navigation within screen - Dialog

  • Dialog providing users with essential information, prompting decisions, or guiding them through specific tasks while minimizing distractions.
  • iOS dialog appears with uniformly scale (linear scaling the same in all directions (isotropically), and used fade out effect at exit.
  • Android dialog, expand and collapse along the y axis as they enter and exit. 
  • Recommendation is to use native iOS or Android patterns.

Flow navigation Forward and backward

  • 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.
  • A horizontal sliding motion indicates moving forward or backward between screens.
  • We recommend to use native Android and iOS style .
  • Android uses a fade as screens slide.
  • iOS uses a parallax effect, meaning the background slides slower than the foreground.