If you look at the example on framer motion docs for scrollable lists, when you drag the item outside the view of the container, the container does not scroll. I'm looking for a behavior similar to this example here by dnd toolkit. You can see in the dnd toolkit example if you drag the item beyond the container, then the container auto scrolls. Is there a way to replicate this auto-scroll behavior in framer-motion using the Reorder component?
1 Answers
I have been running into the same problem. My temporary work-around has been to unset the height on the Reorder.Group component and allow the body to grow by unsetting its height and allowing the page to overflow instead of the element. Here is an example:
https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-scroll-jtlql2
Note that it isn't perfect: it does not support panning, and the animation does not trigger after scrolling with your mouse wheel until you move the mouse itself. I would love to find a solution that supports panning and updates on scroll rather than mouse movement, but this has been the best I've been able to come up with so far!
Would love for you to share your solution here if you were able to fix it yourself.
Related