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.

MotionConfig

Examples

Go beyond the basics

Motion+ is a one-time fee, lifetime membership.

As well as premium Motion features, early access content, and a private Discord community, you'll unlock access to the source code of 90+ premium examples that take the APIs on this page to the next level.

Loading...
Loading...
Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.