Animation » Example Animations » 24. Colors: Interpolation

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”

  • Jie_Ji says:
    May 17, 2022 at 12:57

    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.

    • Tes Mat says:
      May 17, 2022 at 16:06

      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:

      export const SharedColors = {
    primary: "green",
    secondary: "orange",
    warning: "red",
}

      And then, you can import them and use them everywhere, in both code components and code overrides.

      import { SharedColors } from "./Colors.tsx"

export default function A_component() {
    return (
        <>
            <h1 style={{ color: SharedColors.primary }}>Primary color.</h1>
            <h2 style={{ color: SharedColors.secondary }}>Secondary color.</h2>
            <h2 style={{ color: SharedColors.warning }}>This is a warning.</h2>
        </>
    )
}

      Here’s an example project.

      • Jay Ji says:
        May 18, 2022 at 07:30

        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.

        • Tes Mat says:
          May 19, 2022 at 17:21

          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.

Leave a Reply