Motion
Back to framer.com
DocumentationComponents
MotionConfig
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

MotionConfig

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.

PreviousLazyMotionNextReorder
On this page
  • Props

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement