24. Colors: Interpolation
Here the useMotionValue()
and useTransform()
hooks are used to interpolate between three colors. (In the override: motionValue()
.)
Code component
Note that the middle ‘color’ is actually fully transparent, black with 0% opacity: "rgba(0,0,0,0)"
.
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: x,
cursor: "grab",
}}
drag="x"
dragConstraints={{ right: 0, left: 0 }}
whileTap={{ cursor: "grabbing" }}
/>
</motion.div>
)
}
Code overrides
const x = motionValue(0)
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 }}
/>
)
}
}
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: x }}
/>
)
}
}
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.