Chapter 49: useTransform

Core Idea

Transform the output of one motion value into a new motion value.

Key Concepts

• Transform function: A transform function is a normal function that returns a value.
• Value mapping: useTransform can also map a single motion value from one range of values to another.
• Output multiple values: It's common to map a single motion value and input range into multiple motion values.
• clamp: Default: true
• ease: An easing function
• mixer: A function to use to mix between each pair of output values.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const x = useMotionValue(1)
const y = useMotionValue(1)

const z = useTransform(() => x.get() + y.get()) // z.get() === 2

• What it demonstrates: Core usage pattern for useTransform.

Key Takeaways

1. useTransform supports Transform function.
2. useTransform supports Value mapping.
3. useTransform supports Output multiple values.

Connects To

• React Animation: related Motion doc page.
• Motion Values: related Motion doc page.
• useMotionTemplate (React): related Motion doc page.
• useSpring: related Motion doc page.
• HTML content example & tutorial for React: related Motion doc page.