Framer » Animation » Example Animations » 12. Drag: Transform

12. Drag: Transform

This example uses the useMotionValue() and useTransform() hooks to transform the drag distance to scale and rotate values.

Open the Framer Motion version in CodeSandbox

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

Leave a Reply