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.