Chapter 123: useTransform

Core Idea

Discover Motion for Vue's useTransform hook. Create new motion values by transforming others. Learn to map ranges & use clamp, ease, mixer for advanced control.

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

• Vue animations with Motion for Vue: related Motion doc page.
• Motion values: related Motion doc page.
• useMotionTemplate: related Motion doc page.
• useSpring: related Motion doc page.
• Fill text example & tutorial for Vue: related Motion doc page.