Motion Config

Documentation

Motion Config

Reading Time:

1

min

Released

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 }}>
    <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.

Istanbul

Follow us on social media