Motion: [BUG] Using animate with drag causing some strange interactions
2. Describe the bug
updating to framer-motion v2.30 from 2.0.0-beta.75 is causing some issues with drag-enabled divs that are using animate to sync position data.
adding in an animate prop with x/y values from onDragEnd causes the dragged div to behave in a strange way.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Here is a sandbox with a similar set up to what I am trying todo
https://codesandbox.io/s/framer-drag-example-tonb8
its currently set to user framer-motion v2.3.0, if you switch to framer-motion v2.0.0-beta.75 it works how I expect it to work.
4. Steps to reproduce
1) set framer-motion to v2.3.0
2) drag white square in any direction
3) let go and watch as the square doesnt land stay in where I dragged it.
continuing trying to drag the square around the dragging begins to feel like you are pulling a piece of elastic and the square will sometimes shoot out side of the dragable area.
5. Expected behavior
I expect to have the square drag 1 to 1 with the mouse, stay within the drag area and not shoot off.
if you set the code example to framer-motion v2.0.0-beta.75, it is how I expect it to work.
jesse-with
>All comments
The underlying issue here is in Motion 2 transforms are additive to the action of dragging. So when you animating x/y you're actually animating that from the place where you left the dragging element. You could measure the distance and animate that.
There is work going on to consolidate the two models.
mattgperry
on 11 Aug 2020
Related issues
amannn
路
3Comments
kevinwolfdev
路
3Comments
JabX
路
5Comments
mulholio
路
3Comments
JonasWN
路
4Comments
Most helpful comment
The underlying issue here is in Motion 2 transforms are additive to the action of dragging. So when you animating x/y you're actually animating that from the place where you left the dragging element. You could measure the distance and animate that.
There is work going on to consolidate the two models.