Chapter 124: useVelocity

Core Idea

Discover Motion for Vue's useVelocity hook. It tracks a motion value's velocity, letting you monitor the rate of change for any animatable value easily.

Key Concepts

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

Code Examples

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

<template>
  <Motion drag="x" :style="{ x, scale }" />
</template>

• 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.
• Cursor: related Motion doc page.
• Scroll velocity: 3D planes example & tutorial for React: related Motion doc page.