22. Color: Interpolation

Here the useMotionValue() and useTransform() hooks are used to interpolate between three colors. (In the Override: motionValue().)

Code Component

export function CC22ColorInterpolation() {
    const x = useMotionValue(0)
    const background = useTransform(x, [-100, 0, 100], ["#A0D", "#60F", "#0BF"])

    return (
        <Frame size="100%" background={background}>
            <Frame
                // Visual & layout
                size={150}
                radius={75}
                backgroundColor="#fff"
                center
                // Dragging
                drag="x"
                dragConstraints={{
                    right: 0,
                    left: 0,
                }}
                // Transformation
                x={x}
            />
        </Frame>
    )
}

Framer Motion

export function FM22ColorInterpolation() {
    const x = useMotionValue(0)
    const background = useTransform(x, [-100, 0, 100], ["#A0D", "#60F", "#0BF"])

    return (
        <motion.div
            style={{
                width: "100%",
                height: "100%",
                backgroundColor: background,
                display: "flex",
                placeItems: "center",
                placeContent: "center",
            }}
        >
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 75,
                    backgroundColor: "#fff",
                    x: x,
                    cursor: "grab",
                }}
                drag="x"
                dragConstraints={{
                    right: 0,
                    left: 0,
                }}
                whileTap={{ cursor: "grabbing" }}
            />
        </motion.div>
    )
}

Overrides

const x = motionValue(0)

export function Background(): Override {
    const background = useTransform(x, [-100, 0, 100], ["#A0D", "#60F", "#0BF"])
    return {
        background: background,
    }
}

export function Color_Interpolation(): Override {
    return {
        // Dragging
        drag: "x",
        dragConstraints: {
            right: 0,
            left: 0,
        },
        // Transformation
        x: x,
    }
}