Chapter 107: MotionConfig

Core Idea

Configure all child motion components in Vue with MotionConfig. Set global transitions, manage reducedMotion preferences, and ensure CSP nonce compliance easily.

Key Concepts

• Props: Define a fallback transition to use for all child motion components.
• transition: Define a fallback transition to use for all child motion components.
• reducedMotion: Default: "never"
• nonce: If using a Content Security Policy with a nonce attribute
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script setup>
  import { motion, MotionConfig } from "motion-v"
</script>

<template>
  <MotionConfig :transition="{ duration: 1 }">
    <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
      />
  </MotionConfig>
</template>

• What it demonstrates: Core usage pattern for MotionConfig.

Key Takeaways

1. "user": Respect the user's device setting.
2. "always": Enforce reduced motion (useful for debugging).
3. "never": Don't respect reduced motion.

Connects To

• Vue <motion /> component: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.
• Vue transitions: related Motion doc page.
• Accordion example & tutorial for React: related Motion doc page.