Lesson 4/6

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.

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

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!