{"record":{"id":"236413de95bc92dc","repo":"Popmotion/popmotion","slug":"complex-values-origin-and-target-too-dif","errorCode":null,"errorMessage":"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.","messagePattern":"Complex values '(.+?)' and '(.+?)' 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\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/popmotion/src/utils/mix-complex.ts","lineNumber":100,"sourceCode":"    origin: string | number,\n    target: string | number\n): MixComplex => {\n    const template = complex.createTransformer(target)\n    const originStats = analyse(origin)\n    const targetStats = analyse(target)\n\n    const canInterpolate =\n        originStats.numHSL === targetStats.numHSL &&\n        originStats.numRGB === targetStats.numRGB &&\n        originStats.numNumbers >= targetStats.numNumbers\n\n    if (canInterpolate) {\n        return pipe(\n            mixArray(originStats.parsed, targetStats.parsed),\n            template\n        ) as MixComplex\n    } else {\n        warning(\n            true,\n            `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.`\n        )\n\n        return (p: number) => `${p > 0 ? target : origin}`\n    }\n}\n","sourceCodeStart":82,"sourceCodeEnd":108,"githubUrl":"https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/mix-complex.ts#L82-L108","documentation":"`mixComplex` parses complex strings (e.g. box-shadows, gradients, transform strings) into arrays of numbers and colors. If the two values don't have the same structure — same color types and same quantity of numbers/colors — interpolation is impossible, so it emits this `warning` (not a throw) and falls back to an instant transition: before p>0 the origin is shown, after that the target.","triggerScenarios":"`mixComplex('0px 0px 0px rgba(0,0,0,0.2)', '1px 2px 3px #000000')` (mixing rgba with hex), strings with different numbers of numeric values, or animating between values where one side has an extra component.","commonSituations":"Animating box-shadow or filter strings authored in inconsistent formats; values pulled from CSS/design tokens where one uses hex and the other rgba; hand-edited keyframe values.","solutions":["Make both strings structurally identical: same color format and same count of numbers/colors","Normalize all colors to one format (e.g. convert hex to rgba) before animating","If an instant jump is unacceptable, animate the components separately via `animate` on individual values","Heed the warning in the console — the transition is currently not interpolating smoothly"],"exampleFix":"// before\nanimate boxShadow: '0px 2px 4px rgba(0,0,0,0.5)' -> '1px 1px 2px #000000'\n// after\nanimate boxShadow: '0px 2px 4px rgba(0,0,0,0.5)' -> '1px 1px 2px rgba(0,0,0,1)'","handlingStrategy":"fallback","validationCode":"function complexShapesMatch(origin, target) {\n  const nums = s => (s.match(/-?\\d*\\.?\\d+/g) || []).length;\n  const colors = s => (s.match(/(#[0-9a-f]{3,8}|rgba?\\([^)]*\\)|hsla?\\([^)]*\\))/gi) || []).length;\n  return nums(origin) === nums(target) && colors(origin) === colors(target);\n}\n// if false, normalize the strings before animating","typeGuard":null,"tryCatchPattern":"// The library already falls back to an instant jump; add your own guard:\nconst mixer = complexShapesMatch(origin, target)\n  ? mixComplex(origin, target)\n  : (() => { console.warn('Structures differ; animating a proxy instead'); return mixComplex(normalize(origin), normalize(target)); })();","preventionTips":["Author paired complex values (box-shadow, gradient, transform) from a single template so structures always match","Standardize color format (rgba everywhere) in tokens and CSS output","Listen for the console warning in dev — it signals a non-animated jump","If structures can't be matched, animate individual numeric properties instead of the whole string"],"tags":["complex-values","color-format","interpolation","degradation"],"backgroundTag":"complex-value-mix-fallback","analyzedSha":"adf681efd8568ada018ce68082dbd585f25c4c7d","analyzedAt":"2026-09-02T10:01:11.645Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T16:17:10.729Z"}