[BUG] Drag doesn't apply any unit conversion

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]

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]

same issue with 4.0.3