fix(snackbar): swap enter and exit animation curves

[willshowell]

• Uses the standard curve for both enter and exit animations

  • Previous entrance: http://cubic-bezier.com/#.4,0,1,1 (finishes animation too harshly)
  • Previous exit: http://cubic-bezier.com/#0,0,0.2,1 (starts animation too harshly)
  • Currently both: http://cubic-bezier.com/#.4,0,.2,1

• Use long animation duration as spec shows

[josephperrott]

As you noted, we are not using the correct easing curves for our animations. However it appears we just have the curves reversed.

From looking at the spec once again:
Entering the screen should use the deceleration curve - cubic-bezier(0.0, 0.0, 0.2, 1)
Permanently leaving the screen should use the acceleration curve - cubic-bezier(0.4, 0.0, 1, 1)

The durations appear to be correct as they are non-complex transitions. These are also guided by the spec found here.

[willshowell]

@josephperrott

Curve

While some of these points are open for interpretation, here's why I think the standard curve is most appropriate:

1. Most importantly, this defining animation of the standard curve shows a snackbar. (source)

2. The standard curve should be used when moving other on-screen elements, as the snackbar eventually will do.

   Relative movement (source)
   Entering or exiting elements that move other on-screen elements do so along a smooth easing curve, so that they remain minimally disruptive and avoid eye-catching, dramatic movement.

   The standard curve is used for moving elements both in and out of the bounds of the screen. This curve has a slightly longer duration compared to independent elements.

3. The snackbar - in all the Material spec animations - is not traveling at peak velocity, a property of the deceleration curve.

   Entering the screen (source)
   Elements entering the screen use the deceleration curve for a speedy entrance, indicating that they had been travelling at peak velocity.

4. The snackbar is not leaving the screen permanently as use of the acceleration curve would suggest.

   Permanently leaving the screen (source)
   Elements permanently leaving the screen use the acceleration curve to speed off-screen over a slightly shorter duration, as they will not be returning and require less user focus.

Duration

I tried durations of 275ms and 195ms and neither looked like the spec's animations. If you open this animation in VLC, you can see the snackbar is moving for ~12-14 frames, and the video is 30fps. While I agree that the snackbar motion shouldn't be classified as a complex transition, 375ms seemed to best match what I saw in the spec. Further, point 2 above mentions that relative movement should have longer durations.

[willshowell]

Hey @josephperrott, as you can see in my last comment, I feel pretty strongly about this 😁. Would it be possible to send a message to the UX team specifically about snackbar curves and durations?

[josephperrott]

@willshowell sorry for the delay, I actually did as the UX team to get an answer on this one. Ultimately they instructed to use the curves as I outlined in my previous comment:

Entering the screen should use the deceleration curve - cubic-bezier(0.0, 0.0, 0.2, 1)
Permanently leaving the screen should use the acceleration curve - cubic-bezier(0.4, 0.0, 1, 1)

With regards to curves:
I agree with most of your points you outlined in the last update, however I am just following our UX team on this one.

Though I will point out that for #4:

4. The snackbar is not leaving the screen permanently as use of the acceleration curve would suggest.

Any snackbar that comes back into the screen is actually a newly composed snackbar, even if the content is the same content.

With regards to the timings:
I wouldn't fully trust the frame rate in the animation example videos, though we should be able to start setting the rate of animation based on screen size once #6772 lands.

[willshowell]

@josephperrott Thanks for reaching out to them! I'll update it based on your original comment.

[willshowell]

@josephperrott change made

[willshowell]

@josephperrott I've updated this to use the animation constants. Can you take another look?

[josephperrott]

LGTM

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}