[BUG] Drag Controls not calculating correct position

Bug Behavior

After upgrading to 2.1.0 from 1.x, the drag controls do not position the element correctly.

Example Code

Below is example of the code:

const variants = {
  active: {
    opacity: 1,
    scale: 1
  },
  inactive: {
    opacity: 0,
    scale: 0.5
  }
};

const Drag = () => {
  const dragControls = useDragControls();
  const [activeDrag, setActiveDrag] = useState<any | null>(null);

  const onDragStart = useCallback(
    (event, data) => {
      setActiveDrag(data);
      dragControls.start(event, { snapToCursor: true });
    },
    [dragControls]
  );

  const onDragEnd = useCallback(() => {
    setActiveDrag(null);
  }, [activeDrag]);

  return (
    <div>
      <button onDragStart={onDragStart} onDragEnd={onDragEnd}>Drag me</button>
      <motion.div
        drag
        dragControls={dragControls}
        variants={variants}
        animate={activeDrag ? 'active' : 'inactive'}
        onDragEnd={onDragEnd}
      >
        {activeDrag && (
          <div>
            <img
              height="50"
              width="50"
              alt="logo"
              src={img}
            />
          </div>
        )}
      </motion.div>
    </div>
  );
};

Video

https://www.screencast.com/t/P5vEKY9TK

Environment details

Mac, Chrome

[mattgperry]

@o-alexandrov Hopefully this PR fixes your issue https://github.com/framer/motion/pull/660 when it lands. Please open a ticket with a sandbox if it doesn’t though.

[o-alexandrov]

In our case, we upgraded from 2.0.0-beta.77 to 2.1.0 and started to notice:

• dragConstraints property is not working properly for us any longer

On 2.0.0-beta.77 we are 100% confident, everything is working perfectly for us.

• we downgraded, redeployed, and everything is fine with framer-motion for us with 2.0.0-beta.77