Documentation

Documentation

React
MotionConfig

Framer Motion is now Motion for React! Read more

Framer Motion is now Motion for React! Read more

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.

A Motion+ membership will give you early access to features & content, access to our private Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!