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.

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.

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.

LazyMotion

Reorder

Motion+