Open Bug 1501447 Opened 7 years ago Updated 3 years ago

Implement payments tab modal dialog animations

Categories

(Firefox :: WebPayments UI, enhancement, P3)

Product:
Firefox
Component:
WebPayments UI
Type:
enhancement

Tracking

()

People

(Reporter: MattN, Unassigned)

References

(Blocks 1 open bug,
URL
)

Details

(Whiteboard: [webpayments-reserve])

User Story

Transitions:

Details in spec: 
https://mozilla.invisionapp.com/share/S5FXRY0D8TZ#/327532875_11-3_Tab_Model_Motion

Notes:

1) The darkening of the content area
- Starts at 90ms and goes to 100% at 200ms
- 0% > 5%

2) Dialog y-coordinate
- Use the photon motion curve: cubic-bezier(.07,.95,0,1)
- Based the final position at 0px so the motion starts at -432px 
- Starts at 0ms and finishes at 230ms

3) Dialog opacity
(timing is the same as the darkening of content area)
- Starts at 90ms and goes to 100% at 200ms
- 0% > 100%
Video: https://drive.google.com/file/d/1_gIzuYCZrVIPeAAT3VcYVNKQfkgq-wKk/view Eric, can you specify the duration and easing function of the three transitions? Can you also specify how far (e.g. pixels) the dialog should move in the y-direction? Putting the answers in the spec and user story would be good. Developer note: I'm thinking the -3px overlap should also move to a translateY (for better performance?)
Flags: needinfo?(epang)
Added a page to the spec about the tab-motion. Tried a new format, let me know if it makes sense! General notes about it: 1) The darkening of the content area - Starts at 90ms and goes to 100% at 200ms - 0% > 5% 2) Dialog y-coordinate - Use the photon motion curve: cubic-bezier(.07,.95,0,1) - Based the final position at 0px so the motion starts at -432px - Starts at 0ms and finishes at 230ms 3) Dialog opacity (timing is the same as the darkening of content area) - Starts at 90ms and goes to 100% at 200ms - 0% > 100%
Flags: needinfo?(epang)
User Story: (updated)
Whiteboard: [webpayments-reserve] [ux] → [webpayments-reserve]
Matt, please let me know when the animation is implemented, I would like to play around with the css :). Thanks!
Flags: needinfo?(MattN+bmo)
Probably not going to get around to this anytime soon…
Flags: needinfo?(MattN+bmo)
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.