{"record":{"id":"59eb8157889ffa2c","repo":"remotion-dev/remotion","slug":"the-units-of-the-start-and-end-values-must-match","errorCode":null,"errorMessage":"The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}","messagePattern":"The units of the start and end values must match\\. Start value: (.+?), end value: (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":111,"sourceCode":"\t\t}(${interpolatedFunctionArgs.slice(2)})`;\n\t}\n\n\tif (typeof initialStylePropertyPart.number === 'undefined') {\n\t\tif (initialStylePropertyPart.unit !== finalStylePropertyPart.unit) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,\n\t\t\t);\n\t\t}\n\n\t\treturn `${initialStylePropertyPart.unit}`;\n\t}\n\n\tif (\n\t\tinitialStylePropertyPart.unit !== finalStylePropertyPart.unit &&\n\t\tinitialStylePropertyPart.number !== 0 &&\n\t\tfinalStylePropertyPart.number !== 0\n\t) {\n\t\tthrow new TypeError(\n\t\t\t`The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,\n\t\t);\n\t}\n\n\tconst startNumber = initialStylePropertyPart.number;\n\tconst endNumber = finalStylePropertyPart.number || 0;\n\tconst interpolatedNumber = interpolate(\n\t\tinputValue,\n\t\tinputRange,\n\t\t[startNumber, endNumber],\n\t\toptions,\n\t);\n\tconst interpolatedUnit =\n\t\tinitialStylePropertyPart.unit || finalStylePropertyPart.unit || '';\n\n\tif (!interpolatedUnit) {\n\t\treturn interpolatedNumber;\n\t}","sourceCodeStart":93,"sourceCodeEnd":129,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L93-L129","documentation":"Thrown by interpolateStyles when both the start and end parts are numeric but their units differ and neither value is zero. interpolateStyles allows a 0 on either side to pair with any unit (0 is unit-agnostic), but any other numeric pair must share the same unit so the numbers can be linearly blended.","triggerScenarios":"Keyframes like {width: '100px'} to {width: '50%'}; or {transform: 'translate(10px,0)'} to {transform: 'translate(0,1em)'} where the non-zero sides use different units.","commonSituations":"Mixing px and % across keyframes; switching between rem and px; copy-pasting values from design tools that use different units.","solutions":["Convert one side so both keyframes use the same unit (e.g. '50%' to '750px' at a known container width).","If you must cross units, set one side to the literal 0 (number) — 0 pairs with any unit.","Pre-compute unit conversions before building the outputStyles array."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 30], [\n  {width: '100px'},\n  {width: '50%'},  // unit mismatch\n]);\n\n// after\ninterpolateStyles(frame, [0, 30], [\n  {width: '100px'},\n  {width: '750px'},  // same unit\n]);","handlingStrategy":"validation","validationCode":"const unitOf = (v: string): string => {\n  const m = v.match(/^(-?\\d+(?:\\.\\d+)?)([a-z%]*)/i);\n  return m ? m[2] : '';\n};\nconst unitsCompatible = (a: unknown, b: unknown): boolean => {\n  if (typeof a === 'number' || typeof b === 'number') return true; // 0 is unit-agnostic\n  if (typeof a === 'string' && typeof b === 'string') {\n    return unitOf(a) === unitOf(b);\n  }\n  return false;\n};","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use a single unit (preferably px or %) for a property across all keyframes.","Convert units up front before building the outputStyles array.","Use the literal 0 (number) to cross unit boundaries safely."],"tags":["interpolate-styles","css","units","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}