21. Colors: Interpolation

Here, the useTransform() hook interpolates between three colors.

Here, we have an x Motion value that is passed to the horizontally draggable circle and which transforms the backgroundColor between “#a0d”, "rgba(0,0,0,0)" (that’s black; with zero transparency), and “#0bf”.

export function Example() {
    const x = useMotionValue(0);
    const background = useTransform(
        x,
        [-100, 0, 100],
        ["#a0d", "rgba(0,0,0,0)", "#0bf"]
    );

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