Chapter 25: Motion Values

Core Idea

Composable animatable values that can updated styles without re-renders.

Key Concepts

• Events: Listeners can be added to motion values via the on method or the useMotionValueEvent hook.
• Composition: Beyond useMotionValue
• API: Returns the latest state of the motion value.
• get(): Returns the latest state of the motion value.
• getVelocity(): Returns the latest velocity of the motion value.
• set(): Sets the motion value to a new state.
• jump(): Jumps the motion value to a new state in a way that breaks continuity from previous values
• isAnimating(): Returns true if the value is currently animating.
• stop(): Stop the active animation.

Code Examples

import { motion, useMotionValue } from "motion/react"

export function MyComponent() {
  const x = useMotionValue(0)
  return <motion.div style={{ x }} />
}

• What it demonstrates: Core usage pattern for Motion Values.

Key Takeaways

1. Set and get their state.
2. Pass to multiple components to synchronise motion across them.
3. Chain MotionValues via the useTransform hook.
4. Update visual properties without triggering React's render cycle.
5. Subscribe to updates.

Connects To

• React motion component: related Motion doc page.
• useMotionValueEvent: related Motion doc page.
• useVelocity: related Motion doc page.
• useTransform: related Motion doc page.