Motion Config


Motion Config

Reading Time:




27 de septiembre de 2023

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 }}>
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}


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.


Follow us on social media