transform

transform is the function used under-the-hood in useTransform. It can map a value from one range of values to another.

#Usage

Import from Framer Motion.

import { transform } from "framer-motion"

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