Making elements draggable & practice with useTransform

Unlock this video and the rest of this course by joining Frontend.FYI PRO .

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 Motion prop we didn’t discuss before: The drag prop.

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

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.