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 }}
/>
)
}
}