MotionConfig

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.