[MGNLUI-4564] Resurface: Animations Created: 10/Aug/18  Updated: 15/Nov/18  Resolved: 15/Nov/18

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Anja von Gunten Assignee: Unassigned
Resolution: Duplicate Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: File Action_Bar.mov     File App_Launcher_Find_Bar.mp4     File Close_Apps.mp4     File Dialog_Types_fade.mov     File Login_Animation_fade.mov     File button_animation_magnolia.mov     File field_description_scale.mov     File messages_alert_fade.mov     File messages_info_banner.mov     File messages_notification_fade.mov    
Issue Links:
Cloners
is cloned by MGNLUI-4730 Resurface Animations: From Login to f... Closed
is cloned by MGNLUI-4731 Resurface Animations: Close app Closed
is cloned by MGNLUI-4732 Resurface Animations: Action bar Closed
is cloned by MGNLUI-4733 Resurface Animations: Notifications a... Closed
is cloned by MGNLUI-4734 Resurface Animations: Dialogs Closed
is cloned by MGNLUI-4735 Resurface Animations: Primary buttons... Closed
is cloned by MGNLUI-4736 Resurface Animations: Help bubble Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Resurface theme

 Description   

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

 

 

 



 Comments   
Comment by Anja von Gunten [ 10/Aug/18 ]

Rough estimate 21 SP based on Design+planning. Team should re-estimate.

Comment by Antti Hietala [ 14/Sep/18 ]

avongunten, please state your preference as acceptance criteria. This ticket has potential to be very large and too subjective by the developers. Confirm the bullet list and eliminate options (numbered list) that won't work.

Comment by Mikaël Geljić [ 05/Oct/18 ]

Early feedback:

P1. Find bar & app launcher: much better

P2. Login to first screen: might be a tough one, since there is actual page navigation occurring in the browser, between the login screen and the admincentral.
Prerequisite would be to port the login-screen/authentication to the Vaadin world (which I wanted to do for some time anyway, but not a minor effort)
P2. Apps-closing: ok, can barely see the fade-out, fair enough there

P3. Action bar: need to see how fast columns can readjust in real life—that whole horizontal-layout is governed by Vaadin
P3. Notifs/Dialogs: fade-in, ok; fade-out might already be there by default

P4. Buttons/hover, ok, I like this one, all in the details
P4. Description bubbles, should be fine too—although Sasha said "no zoom"

Comment by Antti Hietala [ 15/Nov/18 ]

This ticket was split into smaller tickets. Closing as duplicate.

Generated at Mon Feb 12 09:17:53 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.