search

Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
791 stars 75 forks source link

Janky when dragging higher than intended or a certain speed #18

Closed i-am-the-slime closed 3 years ago

i-am-the-slime commented 3 years ago

Hello there! Thanks for the library. I found that when dragging the sheet higher than its breakpoint at moderate speeds it janks back to a lower position and then animates to the top instead of animating down from the top.

vbylen commented 3 years ago

yep experiencing the same behaviour!

Temzasse commented 3 years ago

@i-am-the-slime could you provide a video or some other type of reproduction of this behaviour? Is this happening on desktop or on mobile?

Temzasse commented 3 years ago

I have hunch that this jankiness is caused by the fact that the animation is driven by two different motion values: one for the dragging and one for the spring animation after the dragging has ended (the jank probably occurs right at the moment we switch between these two motion values).

I need to investigate if Framer Motion v4 has a better way to switch between linear and spring animation without having to create two separate motion values 🤔 🕵🏻

Temzasse commented 3 years ago

I think I figured it out. It's possible to use a single motion value and do the spring animations by using Framer Motion's animate helper: 

animate(y, snapTo, { type: 'spring', ...springConfig });
Temzasse commented 3 years ago

This change is now available in v1.3.2 🚀

Hopefully it fixes your issue 🙂