Manual drag end

[JakeGilesPhillips]

I am trying to make a component that follows the mouse to an extent on hover then snaps back to its position after a certain trigger. In my case once the mouse has passed a certain distance from the original component. I am able to trigger the drag effect on hover, and using constraints and elastic I am having the desired effect.

The problem is I cannot end the drag animation as the drag controls don't expose the stop() function.

Describe the solution you'd like useDragControls() to expose both the start and stop functions so the drag can be manually ended.

Additional context See the light/dark toggle in the bottom left of this site for example https://www.jomor.design/

FAQs

Does Framer Motion support Preact?

It might work with Preact, but we don't explicitly support it, so if it does currently work you'd be using it at your own risk.

[Anubhav-Chauhan3367]

Hi, I want to work on this. Please assign this issue to me.

[p4nthera115]

Were you ever able to find a solution to this @JakeGilesPhillips?

[wkd-kapsule]

+1

[nelsongollop]

Any news about this?

[oisinlavery]

I believe this shipped in v12.21.0

changelog: https://github.com/motiondivision/motion/blob/main/CHANGELOG.md#added-2 docs: https://motion.dev/docs/react-use-drag-controls#manually-stop-and-cancel