FeedbackDialog Motion Specs

[johnbister]

This issue finalizes/fixes the motion specs discussed #977

I made a few minor tweaks to the OPEN and CLOSE FeedbackDialog prototypes based on feedback from @shixiedesign and @mjabbink

@mjabbink Can you please confirm that you’re comfortable with the revised timing for the OPEN and CLOSE prototypes shown below? If you approve, I will go ahead and lay out the timing, curve values, and other specs so @jnm2377 can build.

OPEN:
Open.mp4.zip

CLOSE:
Close.mp4.zip

[jnm2377]

Hey @johnbister I'm gonna move this issue to the gatsby-theme repo so we can keep track of it.

[johnbister]

@jnm2377 Thank you!

@jeanservaas Can you take a look at the OPEN/CLOSE sequence below? @mjabbink thought we were in a good place, but wanted your thumbs up too before we moved forward. Thanks!

FeedbackDialog_v3.mp4.zip

[jeanservaas]

This looks good to me!

[johnbister]

@jnm2377 Hey! Looks like we're ready to hand over some motion specs to you. Here are the OPEN and CLOSE sequences.

OPEN:

OPEN timeline:

OPEN start/finish values:

OPEN curve values:
cubic-bezier(0.4, 0.14, .3, 1) for all curves

---

CLOSE:

CLOSE timeline:

CLOSE start/finish values:

CLOSE curve values:
cubic-bezier(0.4, 0.14, .3, 1) for all curves

---

I apologize for the crazy long comment. Please let me know if this breakdown is helpful or if you need any additional information. Thanks!

[jnm2377]

Hey @johnbister , I don't quite understand everything in your comment. I made a table that kind of shows exactly how I would be implementing this in CSS. I plugged in what I understood from your comment, but there are some things I still need clarification on. I don't understand the difference between group and box in your example. Also, I'm not sure what center x and center y are, or what CSS property those would correlate to, so I didn't include them. If you could plug in the missing info or correct anything that is wrong, that would be really helpful. Thanks!

OPEN animations

ClassName/Element	property	duration token	curven token	delay	open value
.dialog (Group)	width	?	motion(standard, expressive)	0ms	320px
.dialog	height	?	motion(standard, expressive)	4ms ?	436px
.button-row	height	?	motion(standard, expressive)	12ms?	4rem
.button-row	opacity	?	motion(standard, expressive)	12ms	1

CLOSE animations

Element	property	duration token	curven token	delay	closed value
.dialog (Group)	width	?	motion(standard, expressive)	30ms?	0px
.dialog	opacity	?	motion(standard, expressive)	30ms	0
.dialog	height	?	motion(standard, expressive)	37ms ?	0px

[johnbister]

@jnm2377 Thanks! I'll use this chart as template for future handoffs.

Unfortunately, It looks like we're being asked to use a different feedback api called Medallia so let's hit pause on this for now.

[vpicone]

@johnbister Medalia is a paid service, the theme has dozens of sites that could still use this feedback component so it’s worth exploring still.

[mjabbink]

Yes. Please proceed @johnbister

[johnbister]

@jnm2377 I added an active state to the dialog-container, fixed the launch button color, and smoothed out enter/exit motion. I wasn’t able to figure out how to reset focus states after submit, but you can see how far I got at:

https://github.com/johnbister/gatsby-theme-carbon/tree/feedback-motion

Please let me know if you need anything else or have any questions. Thanks!

OPEN animations

Element	property	duration	curven token	delay	open value
.dialog	width	120ms	motion(entrance, expressive)	0ms	320px
.dialog	height	200ms	motion(entrance, expressive)	40ms	436px
.form-container	top	240ms	motion(entrance, expressive)	40ms	0px
.form-container	opacity	240ms	motion(entrance, expressive)	40ms	1
.button-row	height	120ms	motion(entrance, productive)	170ms	4rem
.button-row	margin-top	120ms	motion(entrance, productive)	170ms	0px

CLOSE animations

Element	property	duration	curven token	delay	closed value
.dialog	width	250ms	motion(standard, expressive)	70ms	0px
.dialog	height	250ms	motion(standard, expressive)	0ms	0px
.dialog	opacity	250ms	motion(standard, expressive)	0ms	0
.form-container	top	300ms	motion(standard, expressive)	0ms	200px
.form-container	opacity	300ms	motion(standard, expressive)	0ms	0
.button-row	height	210ms	motion(standard, productive)	120ms	0px
.button-row	margin-top	210ms	motion(standard, productive)	120ms	4rem