transform
Create a function that will map a value from one range to another.
transform
can map a value from one range of values to another.
#Usage
Import from Framer Motion.
// Reactimport { transform } from "framer-motion"
// Universalimport { 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