New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Drag doesn't apply any unit conversion #424
Comments
Yeah I agree this should be handled by the library, I'll see what we can do. |
Any update on this? 🙂 Would love to use |
Hi, with the release of v2 (2.4.1), I can confrim that this is still happening for me. Here's an even simpler test case
https://codesandbox.io/s/framer-motion-simple-animation-forked-evzqz Also, the source of that unexpected string concatenation has moved slightly: https://github.com/framer/motion/blob/main/src/gestures/drag/VisualElementDragControls.ts#L435 Hope this helps. Sorry, I don't have a reliable workaround at this time and still feel too out of my depth to safely introduce any unit conversion (presumably this should happen once, when the drag starts?) |
Whilst I still don't have a workaround, this might be of interest - here I'm using the new https://codesandbox.io/s/framer-motion-simple-animation-forked-7x8zy?file=/src/Example.tsx |
same issue with |
2. Describe the bug
Motion doesn't convert non pixel units applied to elements before dragging begins.
This means that something like this won't work:
Have a look at https://github.com/framer/motion/blob/master/src/behaviours/use-drag.ts#L373
In this case you'll get
origin[axis].get()
returning"100%"
, and what should have been an arithmetic operation becomes a string concatenation ("100%3"
for example).I'm not entirely familiar with the source, but I have a feeling that somewhere around here: https://github.com/framer/motion/blob/master/src/behaviours/use-drag.ts#L436, where the origin motion values are initialised, there should also be a unit conversion.
I sort of hacked around this with an onDragStart handler and a gross oversimplification of unit-type-conversion.ts - https://codepen.io/angry-dan/pen/NWPwPQZ - which works for now, but I really think this should be dealt with by the library.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codepen.io/angry-dan/pen/povdwvr
4. Steps to reproduce
Steps to reproduce the behavior:
5. Expected behavior
Dragging even the first time should be possible.
The text was updated successfully, but these errors were encountered: