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