Motion make surfaces feel alive. The new UI uses some functional animation to smoothly transport users between navigational contexts, explain changes in the arrangement of elements, etc.

PRIO 1 – Critical for MVP

Find bar / App launcher

• Vertical animation: Slide find bar & app launcher down/up on open/close
• Horizontal animation: Slide find bar & app launcher left/right when switching between them
• see video App_Launcher_Find_Bar.mp4
• This animation is covered by FINDBAR-20

PRIO 2 – Nice to have

From Login to first screen

• After Login the first screen is find bar suggestions
• Animation: Fade in suggestions after clicking login
• see video Login_Animation_fade.mov

Apps

• Animation: Fade out app when closing an app
• If there is only one app left, slide down app, followed by find bar suggestions
• see video Close_Apps.mp4

PRIO 3

Action bar

• Animation: Slide action bar left/right on expand/collapse
• see video Action_Bar.mov

Notifications & Alerts

• Animation: Fade in notifications & alerts, Fade out on close
• see video messages_alert_fade.mov
• see video messages_notification_fade.mov

Banners

• Animation: Slide up banner on close
• see video messages_info_banner.mov

 Dialogs

• Animation: Fade in dialogs, Fade out on close
• see video Dialog_Types_fade.mov

PRIO 4

 Buttons

• Animation: Fade in button hover overlay from left to right
• see video button_animation_magnolia.mov

Field description bubbles

• Animation: Scale in/out field description on clicking the icon
• see video field_description_scale.mov