Chapter 106: Motion values

Core Idea

Power Vue animations with Motion values. Track state/velocity, sync components, & update styles without re-renders. Compose with useTransform/useSpring.

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

<script setup>
  import { motion, useMotionValue } from "motion-v"
  const x = useMotionValue(0)
</script>

<template>
  <motion.div :style="{ x }" />
</template>

• 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 Vue's render cycle.
5. Subscribe to updates.

Connects To

• Vue <motion /> component: related Motion doc page.
• useMotionValueEvent: related Motion doc page.
• useVelocity: related Motion doc page.
• useTransform: related Motion doc page.