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,
    }
}