Some Examples » 24. Colors: Interpolation

24. Colors: Interpolation

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

Code component

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 default function CC_24_Colors_Interpolation(props) {
    const x = useMotionValue(0)
    const background = useTransform(
        x,
        [-100, 0, 100],
        ["#a0d", "rgba(0,0,0,0)", "#0bf"]
    )

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

Code overrides

The useMotionValue() hook only works inside functions, so when sharing a Motion value between overrides, we use motionValue() instead.

We also have an x Motion value that we pass to the horizontally draggable circle:

const x = motionValue(0)

export function Colors_Interpolation(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        return (
            <Component
                {...rest}
                drag="x"
                dragConstraints={{ right: 0, left: 0 }}
                style={{ ...style, x }}
            />
        )
    }
}

… and which is used in a second override to interpolate the backgroundColor between “#a0d”, "rgba(0,0,0,0)" (that’s black; with zero transparency), and “#0bf”.

export function Background(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        const background = useTransform(
            x,
            [-100, 0, 100],
            ["#a0d", "rgba(0,0,0,0)", "#0bf"]
        )

        return (
            <Component
                {...rest}
                style={{ ...style, backgroundColor: background }}
            />
        )
    }
}

24. Colors: Interpolation

Code component

Code overrides

Join the Mighty Guides mailing list ( ± 6 emails/year )

Leave a Reply Cancel reply