Refine Bottom Sheets in/out transition #595
Comments
iamthomasbishop
added
the
[Type] Enhancement
26 tasks
koke
added a commit
to WordPress/gutenberg
that referenced
this issue
Apr 4, 2019
As specified in wordpress-mobile/gutenberg-mobile#595 I did my best to adjust to the specs there, and for the most part the animations matches what was requested. One limitation is that due to how react-native-modal is implemented, we don't know the view's height when it's about to be presented, and so it starts the "slide in" animation not from the bottom edge, but from a lower point, since it uses the window height to displace the view and not the view's height. The result is an animation that appears slower than specified, since the view has to traverse a longer distance in the same time, and there is a delay before the view starts appearing. This is mildly annoying, but I could not find a way to make it work without rewriting react-native-modal.
This was referenced Apr 4, 2019
koke
added a commit
to WordPress/gutenberg
that referenced
this issue
Apr 16, 2019
As specified in wordpress-mobile/gutenberg-mobile#595 I did my best to adjust to the specs there, and for the most part the animations matches what was requested. One limitation is that due to how react-native-modal is implemented, we don't know the view's height when it's about to be presented, and so it starts the "slide in" animation not from the bottom edge, but from a lower point, since it uses the window height to displace the view and not the view's height. The result is an animation that appears slower than specified, since the view has to traverse a longer distance in the same time, and there is a delay before the view starts appearing. This is mildly annoying, but I could not find a way to make it work without rewriting react-native-modal.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The transitions when the bottom sheet come in and go out are a little slow. Let's refine to use some custom curves:
In
transition: all 600ms cubic-bezier(0.450, 0.000, 0.160, 1.020);
Out
Same curve, but quicker:
transition: all 250ms cubic-bezier(0.450, 0.000, 0.160, 1.020);
Demo
Altogether it looks like this:
The text was updated successfully, but these errors were encountered: