Motion: [BUG] Drag Controls not calculating correct position

[amcdnl]

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

[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

[vercetti11]

Same thing happened to me as @o-alexandrov says… @amcdnl

[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.

[amcdnl]

@InventingWithMonster - Tested w/ latest release 2.1.4 and still not working - same behavior. I'll try to make a demo for you.

[mattgperry]

Yeah this is two separate bugs but A demo would be appreciated in tackling
the one in the ticket.

On Fri, 24 Jul 2020 at 16:01, Austin [e-mail] wrote:

@InventingWithMonster https://github.com/InventingWithMonster - Tested
w/ latest release 2.1.4 and still not working - same behavior. I'll try to
make a demo for you.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/framer/motion/issues/643#issuecomment-663553247, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AB34WKQDVZ5JVKYALTKV53TR5GH2BANCNFSM4PCHVPEA
.

[amcdnl]

@InventingWithMonster - Here ya go: https://codesandbox.io/s/framer-drag-bug-1l2c7

[amcdnl]

@InventingWithMonster - Looks like on 2.4.2 the demo I made above works. Thanks!