Forward

Forward transition is to be used when transitioning to the next screen in the flow

Animation: Move in
Direction: From right to left
Curve: Linear
Duration: 300 ms

Demo link

Backward

Backwards transition is to be used when transitioning to the previous screen in the flow

Animation: Move out
Direction: From left to right
Curve: Linear
Duration: 200 ms

Demo link

Up

Up transition is to be used when transitioning to the first screen of a new flow

Animation: Move in
Direction: Up
Curve: Linear
Duration: 300 ms

Demo link

Down

Down transition is to be used whenever closing a first screen of a flow which came from the bottom and at the end of that flow.

Animation: Move out
Direction: Down
Curve: Linear
Duration: 200 ms

Demo link

Variable height up

Variable height transition is used when a bottomsheet has to progressively disclosure more information

Animation: Move in + Dark overlay
Direction: Up
Curve: Linear
Duration: 300 ms

Demo link

Variable height down

Variable height transition to be reversed on close and on back button or gestures

Animation: Move in + Dark overlay
Direction: Down
Curve: Linear
Duration: 300 ms

Demo link

Card expand

Post the elements inside the card move out in animation, the card expands to form the full page

Animation: Elements inside move + card expands to full page
Direction: From the card’s position to full page
Curve: Linear
Duration: 300 ms + 400 ms

Card collapse

The page collapse to the card size and elements inside return to original position

Animation: elements inside move + card collapses
Direction: From full page to card's initial position
Curve: Linear
Duration: 300ms + 400ms

Pop-up appear

Appear animation and dark overlay to appear simultaneously

Animation: Popup expands + Dark overlay
Direction: From centre of screen
Curve: Linear
Duration: 300 ms

Pop-up collapse

The pop-up collapse and dark overlay disappears.

Animation: Popup shrinks + remove dark overlay
Direction: To the centre of the screen
Curve: Linear
Duration: 100 ms

Roulette add

Roulette Add should move the number upward. The topmost number will always be 0 for the first digit and no digits in case of new 10s place or decimal entry.

Animation: Move in
Direction: Upward
Curve: Linear
Duration: 300 ms

Roulette remove

Roulette remove should move the number down to 0 for the last digit and no digits in case of 10s places or decimal entry.

Animation: Move in
Direction: Downward
Curve: Linear
Duration: 200 ms

Bottom nav

The bottom nav interaction will be instant but the icon animation and page loading to happen only when finger leaves the screen. The L0 screens when dragged performs navigation.

Animation: Drag animation + Haptic
Direction:Dragging direction/opposite of touch
Curve: Instant (The screen loads only after finger leaves the screen)
Duration: Drag duration / instant on touch

Figma prototype