Motion
Back to framer.com
DocumentationUtilities
transform
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

transform

Create a function that will map a value from one range to another

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
PreviousanimateNextuseAnimationControls
On this page
  • Usage

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement