You're attempting to mix two different strings, and receiving this warning.

Explanation

A complex string is a string that can contain multiple numbers or colors.

• 0: A number

• "#fff": A color

• "0px": A pixel unit number

• "0px 100px": A complex string

Motion supports animating between any two complex strings, but they both must contain the same number of numbers, colors, and CSS variables in each.

The caveat is with numbers, where Motion is able to animate from fewer numbers to more numbers:

✅ "0px" -> "0px 100px 0px 100px"

Here, it will use the initial keyframe as the initial value for all the new numbers. In the future it might be that the opposite is also supported. If this is something you'd like to see, please open a feature request.

Solution

The solution here is to ensure each string contains the same number of numbers, colors and CSS variables. For example:

🚫 "0px 100px 0px 100px" -> "0px"
✅ "0px 100px 0px 100px" -> "0px 0px 0px 0px"

🚫 "blur(0px)" <-> "blur(10px) hue-rotate(20deg)"
✅ "blur(0px) hue-rotate(0deg)" <-> "blur(10px) hue-rotate(20deg)"