Skip to content
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

Closed
angry-dan opened this issue Jan 3, 2020 · 5 comments · Fixed by #1322
Closed

[BUG] Drag doesn't apply any unit conversion #424

angry-dan opened this issue Jan 3, 2020 · 5 comments · Fixed by #1322
Labels
bug Something isn't working

Comments

@angry-dan
Copy link

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:

<motion.div
  initial={{ y: "100%" }}
  drag="y"
/>

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:

  1. Go to https://codepen.io/angry-dan/pen/povdwvr
  2. Try to drag the element, note that you can't
  3. Stop dragging, note the drag end transition converts the initial percentage to a px value and then further drags are possible.

5. Expected behavior
Dragging even the first time should be possible.

@angry-dan angry-dan added the bug Something isn't working label Jan 3, 2020
@mattgperry
Copy link
Collaborator

Yeah I agree this should be handled by the library, I'll see what we can do.

@DanielRoeven-Intunio
Copy link

Any update on this? 🙂 Would love to use rems to set initial and animation variants on a draggable component. I currently worked around this by querying the document's root font size, storing it in a state variable remPixelValue, and manually performing the unit conversion. But that breaks down when the documents root font size changes (it seems like the updating the variants prop doesn't trigger a rerender).

@angry-dan
Copy link
Author

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

<motion.div drag="x" animate={{ x: "10%" }} />

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?)

@angry-dan
Copy link
Author

Whilst I still don't have a workaround, this might be of interest - here I'm using the new layout prop to update an element's position within a grid once dragging is done. Which does at least start to allow for "snap to grid" style dragging 👍

https://codesandbox.io/s/framer-motion-simple-animation-forked-7x8zy?file=/src/Example.tsx

@mmintel
Copy link

mmintel commented Mar 31, 2021

same issue with 4.0.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants