12. Drag: Transform
This example uses the useMotionValue()
and useTransform()
hooks to transform the drag distance to scale
and rotate
values.
Code component
export function CC12DragTransform() {
const x = useMotionValue(0)
const scale = useTransform(x, [-150, 150], [1.5, 0.5])
const rotate = useTransform(x, [-150, 150], [-90, 90])
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Dragging
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
// Transformation
x={x}
scale={scale}
rotate={rotate}
/>
)
}
Framer Motion
export function FM12DragTransform() {
const x = useMotionValue(0)
const scale = useTransform(x, [-150, 150], [1.5, 0.5])
const rotate = useTransform(x, [-150, 150], [-90, 90])
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
x: x,
scale: scale,
rotate: rotate,
cursor: "grab",
}}
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
whileTap={{ cursor: "grabbing" }}
/>
</Center>
)
}
Override
export function Drag_Transform(): Override {
const x = useMotionValue(0)
const scale = useTransform(x, [-150, 150], [1.5, 0.5])
const rotate = useTransform(x, [-150, 150], [-90, 90])
return {
// Dragging
drag: "x",
dragConstraints: { left: 0, right: 0 },
dragTransition: { bounceStiffness: 600, bounceDamping: 20 },
// Transformation
x: x,
scale: scale,
rotate: rotate,
}
}