Making elements draggable & practice with useTransform

Before we can start transforming values, we first need to have a value we can actually transform. For that we are going to take a look at a Framer Motion prop we didn’t discuss before: The drag prop.

1
<motion.div
2
  drag="x"
3
/>

Adding this single attribute makes the element draggable over the x-axis. Without providing any additional props, this will add a translateX style when you drag the element.

If that is the only prop you add, your element will be draggable, but you are unable to know or control how far the user moved the element. For that we can supply our own x motion value, and use that to drive the drag.