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 }}
/>
)
}
}
4 comments on “24. Colors: Interpolation”
Leave a Reply
You must be logged in to post a comment.
Hello Author,
I want to ask how to use Shared Color in code. I remember that I could access to Shared Color in legacy code like “import { colors } from “./canvas”, but it is invalid now. So is it have another to use them?
Thanks.
When you want to use shared colors only in code, I suppose you could roll your own solution.
Put the colors in a separate file from which you
export
them, like this:And then, you can import them and use them everywhere, in both code components and code overrides.
Here’s an example project.
Thanks, it’s useful for code components.
But can I access Shared Color created in canvas (Color Panel)? So I can manage color in both normal components and code components.
That used to be possible; before the launch of Framer for Developers, we could import those colors from the ‘canvas’ file. But not anymore.
Something like that will probably reappear, together with the possibility to access text styles, etc.