DocsReactMotion reference

MotionConfig

Configure default transition options and manage reduced motion preferences.

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.

1.card {2  transition: scale 200ms linear(3    0, 0.009, 0.036, 0.084, 0.157, 0.255, 0.378,4    0.522, 0.679, 0.832, 0.954, 1.029, 1.052, 1.038,5    1.011, 0.99, 0.984, 0.991, 1.001, 1.005, 16  );7}89.card:hover {10  scale: 1.2;11}

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

transformPagePoint maps pointer coordinates from page space into the coordinate space of your elements. Motion applies it to pointer positions throughout drag and pan gestures, and when measuring ref-based dragConstraints.

You need it when something sat between the page and your element changes that coordinate space. The two common causes are a CSS transform on a parent element, and an SVG viewBox that differs from the SVG's rendered size. In both cases the pointer and the element disagree about how far a movement is, so a dragged element travels the wrong distance.

Motion provides a helper for each case.

`correctParentTransform`

When a parent element has a CSS transform (scale, rotate or skew), pass that element's ref to correctParentTransform.

import { motion, MotionConfig, correctParentTransform } from "motion/react"
import { useRef } from "react"

export function Component() {
  const ref = useRef(null)

  return (
    <div ref={ref} style={{ transform: "scale(0.5)" }}>
      <MotionConfig transformPagePoint={correctParentTransform(ref)}>
        <motion.div drag />
      </MotionConfig>
    </div>
  )
}

The parent's computed transform is read on each pointer event, so this works with static and animating transforms alike.

`transformViewBoxPoint`

When an svg element has a viewBox that differs from its rendered size, pass the svg element's ref to transformViewBoxPoint. SVG animation has a full example.

Custom transforms

transformPagePoint accepts any function that takes a page point and returns a corrected one.

<MotionConfig transformPagePoint={({ x, y }) => ({ x: x / 2, y: y / 2 })}>
  <motion.div drag />
</MotionConfig>

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

Visual editing for your agent.