Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. The documentaton may not be up to date with the latest features and include missing or outdated information. You can always create an issue on GitHub or even better a pull request to fix the documentation or add new features.

MotionConfig

MotionConfig lets you set defaults for transitions and reduced motion behavior.

Default transitions

import { MotionConfig } from "motion-solid";

<MotionConfig transition={{ type: "spring", stiffness: 300, damping: 30 }}>
  <App />
</MotionConfig>;

Every motion component inside the provider will use this transition unless it provides its own transition prop.

Reduced motion

<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

reducedMotion accepts:

  • "user": respect prefers-reduced-motion.
  • "always": force reduced motion.
  • "never": never reduce motion (default).

When reduced motion is active, transform animations (x, y, scale, rotate, etc) use a duration: 0 transition. Layout animations are not automatically reduced yet.

Hooks

useMotionConfig returns the current config context, and useReducedMotion provides direct access to the user's system preference.