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.

Content

Read explanation and solution

You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.

Content

Read explanation and solution

Container/Target ref is defined but not hydrated

Content

Read explanation and solution

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

Read explanation and solution

'${color}' is not an animatable color. Use the equivalent color code instead.

Content

Read explanation and solution

You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${invalidKeyframe}" is not an animatable value.

Content

Read explanation and solution

Spring duration must be 10 seconds or less

Content

Read explanation and solution

Invalid easing type '${definition}'

Content

Read explanation and solution

Cubic bezier arrays must contain four numerical values.

Content

Read explanation and solution

Both input and output ranges must be the same length.

Content

Read explanation and solution

Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.

Content

Read explanation and solution

Mini animate() doesn't support "type" as a string.

Content

Read explanation and solution

ou have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.

Content

Read explanation and solution

If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.

Content

Read explanation and solution

Reorder.Group must be provided a values prop

Content

Read explanation and solution

Troubleshooting

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.

Content

'${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.

Content

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

Stay in the loop

Stay in the loop