Beta Status
This library is still in early beta and the API is subject to change and may get daily breaking changes. If the docs and the package disagree, prefer the package and open an issue on GitHub or send a pull request with a fix.
MotionConfig
MotionConfig gives you subtree-wide defaults for transitions and reduced motion.
Props
transition:Transition. Default transition for descendants.reducedMotion:"always" | "never" | "user". Reduced motion policy. The default is"never".
Hooks
useMotionConfig():MotionConfigContextValue | nulluseReducedMotion():Accessor<boolean>
Notes
- Nested
MotionConfigproviders override outer values. useMotionConfig()exposestransition,reducedMotion, andisReducedMotion.useReducedMotion()returns the systemprefers-reduced-motionvalue, not the resolvedMotionConfigsetting.
Example
<MotionConfig transition={{ type: "spring", stiffness: 320, damping: 24 }}>
<motion.div animate={{ x: 80 }} />
</MotionConfig>
MotionConfig