Documentation

Documentation

React

MotionConfig

MotionConfig

The MotionConfig component can be used to set configuration options for all child motion components.

import { motion, MotionConfig } from "motion/react"

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)

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.

import { motion, MotionConfig } from "motion/react"

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)

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.

import { motion, MotionConfig } from "motion/react"

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)

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.

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.