Set configuration options for Framer Motion.

The MotionConfig component can be used to set configuration options for all child motion components. Currently, it only accepts one prop, transition.

import { motion, MotionConfig } from "framer-motion"

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

Props

transition: Transition

Defines a new default transition for the entire tree.

reducedMotion: "user" | "always" | "never"

Defaults to "never"

reducedMotion lets you set a site-wide policy for handling reduced motion:

• user: Respect user's device setting.

• always: Enforce reduced motion.

• never: Don't reduce motion.

When motion is reduced, transform and layout animations will be disabled. Other animations, like opacity and backgroundColor, will persist.

Note: The types of animations that are disabled and remain enabled should be expected to resolve as we gather feedback.