CODEWITHSUNDEEP
reactjsframer-motion
satvikpendem
satvikpendem

Reputation: 179

How can I make a drag handle drag correctly in Framer Motion?

I wanted to replicate this tutorial (https://www.youtube.com/watch?v=UMGnYRJuJog) that shows how to create a drag handle in Framer X. Using framer-motion, I thought it worked but I am getting extra space on dragging that shouldn't occur. It may be something with display: flex but I'm not entirely sure, whether I'm doing something incorrectly or whether this is a bug in framer-motion.

CodeSandbox reproduction

https://codesandbox.io/s/jolly-cerf-kh9o5

Steps to reproduce

Create two panels and a drag handle, and make the handle add width to one panel and subtract from another.

Expected behavior

The handle should drag and not have extra space. It should also follow the mouse which it is not doing.

Video reproduction

https://i.sstatic.net/lKAgM.gif

Environment details

Windows 10, Chrome

Upvotes: 2

Views: 4238

Answers (1)

Steve Ruiz
Steve Ruiz

Reputation: 61

The trick here is to first control the container's y position using a motion value, then use an onPan event (on the handle) to set that motion value's value.

function Example() {
  const containerY = useMotionValue(0)

  return (
    <motion.div style={{ y: containerY }}>
      <motion.div onPan={(e, info) => containerY.set(info.offset.y)}>
        Drag Me
      </motion.div>
      <div>Can't drag me</div>
    </motion.div>
  )
}

Upvotes: 1

Related Questions