{"record":{"id":"9734bc90f993b5da","repo":"remotion-dev/remotion","slug":"cannot-interpolate-output-because-it-mixes","errorCode":null,"errorMessage":"Cannot interpolate \"${output}\" because it mixes ${kind} and ${part.kind} values","messagePattern":"Cannot interpolate \"(.+?)\" because it mixes (.+?) and (.+?) values","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":458,"sourceCode":"\n\tconst parts = output.trim().split(/\\s+/);\n\tif (parts.length < 1 || parts.length > 3 || parts[0] === '') {\n\t\tthrow new TypeError(\n\t\t\t`String outputRange values must contain 1 to 3 components, but got \"${output}\"`,\n\t\t);\n\t}\n\n\tif (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {\n\t\treturn parseTransformOriginValue(output, parts);\n\t}\n\n\tconst parsed = parts.map((part) =>\n\t\tparseStringInterpolationComponent(part, output),\n\t);\n\tconst [{kind}] = parsed;\n\tfor (const part of parsed) {\n\t\tif (part.kind !== kind) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Cannot interpolate \"${output}\" because it mixes ${kind} and ${part.kind} values`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (kind === 'scale') {\n\t\tconst x = parsed[0].value;\n\t\tconst y = parsed[1]?.value ?? x;\n\t\tconst z = parsed[2]?.value ?? 1;\n\t\treturn {\n\t\t\tkind,\n\t\t\tvalues: [x, y, z, 0],\n\t\t\tunits: [null, null, null, null],\n\t\t\tdimensions: parsed.length,\n\t\t\taxisRotation: false,\n\t\t};\n\t}\n","sourceCodeStart":440,"sourceCodeEnd":476,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L440-L476","documentation":"Thrown by parseStringInterpolationValue when a single outputRange string contains components that parse to different interpolation kinds (scale vs translate vs rotate). All components of one value must share a kind so Remotion can interpolate them on the same axis set; mixing e.g. a unit-less scale number with a length forces an ambiguous interpolation.","triggerScenarios":"A multi-component string whose parts disagree: \"1px 90deg\" (translate + rotate), \"1 2px\" (scale + translate), \"2 1px 3\" (scale + translate + scale). The first component's kind is taken as the expected kind and any deviation throws.","commonSituations":"Authoring a transform shorthand by hand and mixing unit-less scale factors with translate lengths or angles; copy-pasting a full CSS transform() into a single output slot.","solutions":["Keep all components the same kind: \"1 2 3\" (scale), \"1px 2px 3px\" (translate), or \"1deg 2deg 3deg\" (rotate).","Split independent transforms across separate interpolate() calls and compose them in style.transform."],"exampleFix":"// before\ninterpolate(t, [0, 1], [\"1px 90deg\", \"10px 180deg\"]);\n// after\nconst tx = interpolate(t, [0, 1], [\"1px\", \"10px\"]);\nconst rot = interpolate(t, [0, 1], [\"90deg\", \"180deg\"]);\n// style.transform = `translate(${tx}) rotate(${rot})`","handlingStrategy":"validation","validationCode":"const angleUnits = new Set(['deg','rad','grad','turn']);\nconst lengthUnits = new Set(['px','em','rem','%','vh','vw','pt','pc','cm','mm','in','ch','ex','cap','ic','lh','vmin','vmax','dvh','dvw','svh','svw','lvh','lvw','vb','vi','q','cqb','cqh','cqi','cqmax','cqmin','cqw','rlh']);\n\nfunction componentKind(part: string): 'scale' | 'translate' | 'rotate' {\n  const m = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))([a-zA-Z%]+)?$/.exec(part);\n  if (!m) throw new Error(`unparseable component: ${part}`);\n  const unit = m[2];\n  if (!unit) return 'scale';\n  if (angleUnits.has(unit)) return 'rotate';\n  if (lengthUnits.has(unit)) return 'translate';\n  throw new Error(`unknown unit: ${unit}`);\n}\n\nfunction isHomogeneousString(value: string): boolean {\n  const parts = value.trim().split(/\\s+/);\n  const kinds = parts.map(componentKind);\n  return kinds.every((k) => k === kinds[0]);\n}\n\noutputRange.filter((o) => typeof o === 'string').forEach((o) => {\n  if (!isHomogeneousString(o)) throw new Error(`Mixed kinds in: ${o}`);\n});","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Within one output string, use only one kind: all unit-less (scale), all lengths (translate), or all angles (rotate).","Compose multiple transforms via separate interpolate() calls."],"tags":["interpolate","string-interpolation","kind-mismatch","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}