Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adjust the close animation for temporary drawer

See original GitHub issue

Bug

What MDC-Web Version are you using?

0.10.0

What browser(s) is this bug affecting?

Chrome Version 58.0.3029.110 (64-bit), Firefox 53.0.2 (64-bit). Android Chrome 58

What OS are you using?

Linux 64 bit, Android 6.0.1, Should be similar on Mac and Windows.

What are the steps to reproduce the bug?

Open the Temporary Drawer https://material-components-web.appspot.com/drawer/temporary-drawer.html# Close the Drawer, e.g. with Esc.

What is the expected behavior?

A close animation of around 200ms duration https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations

What is the actual behavior?

A very fast close animation, almost instant. Haven’t measured, but e.g. the Gmail app on Android has a much smoother and gentle close animation.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

yeelan0319commented, May 24, 2017

@j-o-d-o and @jonboj

Designer came back after carefully review the animation, it is indeed to fast. Here are the actions we will take:

Slow down the animation to 195ms
Change the curve to cubic-bezier(.4, 0, 0.6, 1), which accelerates then slow down

Here is a prototype pen for after making those changes, please take a look and give your feedback.

1reaction

yeelan0319commented, May 15, 2017

Hi @j-o-d-o , all MDC component have designers checked and signed off before release. However, your feedback is definitely valuable voice from the community. We will resurface the issue with designer and keep you posted!

Top Results From Across the Web

mdc-web Temporary Drawer - close animation - Stack Overflow

With e.g. the Gmail app on Android, the close animation of the Temporary Drawer seems different. mdc-web 0.10.0. Very fast, nearly instant.

Drawer API - Material UI - MUI

API reference docs for the React Drawer component. Learn about the props ... The props of the Modal component are available when variant="temporary"...

Drawer - Kaizen Design System

A drawer is a temporary workspace that allows users to complete tasks without navigating ... The horizontal width of content should always fit...

Fade a widget in and out - Flutter documentation

The AnimatedOpacity widget makes it easy to perform opacity animations. ... Make this change using setState() , which is a method on the...

Drawer - MudBlazor - Blazor Component Library

If you use two-way binding @bind-Open="..." , you can toggle the Drawer and it will close itself on navigation. If you set its...