Chapter 50: useVelocity

Core Idea

Creates a new motion value that outputs the velocity of another motion value.

Key Concepts

• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)

return <motion.div drag="x" style={{ x, scale }} />

• What it demonstrates: Core usage pattern for useVelocity.

Key Takeaways

1. useVelocity supports Animate faster with Motion+..

Connects To

• Motion Values: related Motion doc page.
• useMotionValueEvent: related Motion doc page.
• Custom cursor & follow-cursor animations: related Motion doc page.
• Scroll velocity: 3D planes example & tutorial for React: related Motion doc page.