Troubleshooting
Errors and warnings happen — solve them with Motion's straightforward troubleshooting.
You have Reduced Motion enabled on your device. Animations may not appear as expected.
You have Reduced Motion enabled on your device. Animations may not appear as expected.
Content
You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.
Content
Container/Target ref is defined but not hydrated
Content
Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.
Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.
Content
'${color}' is not an animatable color. Use the equivalent color code instead.
'${color}' is not an animatable color. Use the equivalent color code instead.
Content
You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${invalidKeyframe}" is not an animatable value.
You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${invalidKeyframe}" is not an animatable value.
Content
Spring duration must be 10 seconds or less
Spring duration must be 10 seconds or less
Content
Invalid easing type '${definition}'
Content
Cubic bezier arrays must contain four numerical values.
Content
Both input and output ranges must be the same length.
Content
Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.
Content
Mini animate() doesn't support "type" as a string.
Content
ou have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.
Content
If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.
Content
Reorder.Group must be provided a values prop
Content
Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes}.
Content
Reorder.Item must be a child of Reorder.Group
Content
Repeat count too high, must be less than 20.
Content
No valid elements provided.
Content
Motion is supported by the best in the industry.
