Animation » Example Animations » 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 }}
            />
        )
    }
}


Join the Framer book mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



4 comments on “24. Colors: Interpolation”

  • Jie_Ji says:

    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:

      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:

        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:

          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