Function useTransform

Create a MotionValue that transforms the output of another MotionValue by mapping it from one range of values into another.

Remarks

Given an input range of [-200, -100, 100, 200] and an output range of [0, 1, 1, 0], the returned MotionValue will:

• When provided a value between -200 and -100, will return a value between 0 and 1.
• When provided a value between -100 and 100, will return 1.
• When provided a value between 100 and 200, will return a value between 1 and 0

The input range must be a linear series of numbers. The output range can be any value type supported by Framer Motion: numbers, colors, shadows, etc.

Every value in the output range must be of the same type and in the same format.

export const MyComponent = () => {
  const x = useMotionValue(0)
  const xRange = [-200, -100, 100, 200]
  const opacityRange = [0, 1, 1, 0]
  const opacity = useTransform(x, xRange, opacityRange)

  return (
    <motion.div
      animate={{ x: 200 }}
      style={{ opacity, x }}
    />
  )
}
Copy

Create a MotionValue that transforms the output of another MotionValue through a function. In this example, y will always be double x.

export const MyComponent = () => {
  const x = useMotionValue(10)
  const y = useTransform(x, value => value * 2)

  return <motion.div style={{ x, y }} />
}
Copy

Pass an array of MotionValues and a function to combine them. In this example, z will be the x multiplied by y.

export const MyComponent = () => {
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)

  return <motion.div style={{ x, y, z }} />
}
Copy