Chapter 94: Vue <motion /> component

Core Idea

Drive animations in Motion for Vue with motion components. Supercharge HTML/SVG for 120fps animations & gestures. High-performance, SSR-compatible & customizable.

Key Concepts

• Custom components: Any Vue component can be supercharged into a motion component by passing it to motion.crea
• Motion Primitive: For those familiar with Radix UI Primitives
• Performance: motion components animate values outside the Vue render cycle for improved performance.
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Server-side rendering: motion components are fully compatible with server-side rendering
• Props: motion components accept the following props.
• Animation: The initial visual state of the motion component.
• initial: The initial visual state of the motion component.
• animate: A target to animate to on enter

Code Examples

import { motion } from "motion-v"

• What it demonstrates: Core usage pattern for Vue <motion /> component.

Key Takeaways

1. Vue <motion /> component supports Custom components.
2. Vue <motion /> component supports Motion Primitive.
3. Vue <motion /> component supports Performance.

Connects To

• Vue animations with Motion for Vue: related Motion doc page.
• Motion values: related Motion doc page.
• useDragControls: related Motion doc page.
• Vue layout animations: related Motion doc page.
• Vue transitions: related Motion doc page.