transform

transform can map a value from one range of values to another.

#Usage

Import from Framer Motion.

// React
import { transform } from "framer-motion"

// Universal
import { transform } from "framer-motion/dom"

Note: React users are recommended to use useTransform instead but can still use transform directly for low-level use.

Create a transformation function by passing two ranges, an input range and an output range:

const transformer = transform([0, 100], [0, 360])

The returned function can now be called with an input value, and will return an output value:

const rotate = transformer(50) // 180

Both ranges must always be the same length.

The input range must always be a linear series of numbers, either counting up or counting down.

The output range must all be of the same type, but can be any type supported by Framer Motion, for instance numbers, colors, shadows etc.

const backgroundColor = transform(
  [0, 100],
  ["#f00", "#00f"]
)(50)

It's possible to provide more than two values to each range. For instance, with the following mapping, the output will only be 1 within an input of 0 and 100.

transform(
  [-100, 0, 100, 200],
  [0, 1, 1, 0]
)

If clamp: false is provided, the returned function will map infinitely:

const transformer = transform([0, 100], [0, 360], { clamp: false })
const rotation = transformer(200) // 720