The MotionConfig component can be used to set configuration options for all child motion components.
<script setup>
import { motion, MotionConfig } from "motion-v"
</script>
<template>
<MotionConfig :transition="{ duration: 1 }">
<motion.div
:initial="{ opacity: 0 }"
:animate="{ opacity: 1 }"
/>
</MotionConfig>
</template>Props
transition
Define a fallback transition to use for all child motion components.
reducedMotion
Default: "never"
reducedMotion lets you set a site-wide policy for handling reduced motion. It offers the following options:
-
"user": Respect the user's device setting. -
"always": Enforce reduced motion (useful for debugging). -
"never": Don't respect reduced motion.
When reduced motion is on, transform and layout animations will be disabled. Other animations, like opacity and backgroundColor, will persist.
nonce
If using a Content Security Policy with a nonce attribute, passing the same attribute through MotionConfig will allow any style blocks generated by Motion to adhere the the security policy.