{"record":{"id":"e8b9823590bd318f","repo":"remotion-dev/remotion","slug":"cannot-interpolate-value-because-unit-is","errorCode":null,"errorMessage":"Cannot interpolate \"${value}\" because \"${unit}\" is not a supported translate or rotate unit","messagePattern":"Cannot interpolate \"(.+?)\" because \"(.+?)\" is not a supported translate or rotate unit","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":170,"sourceCode":"\tif (!Number.isFinite(numberValue)) {\n\t\tthrow new TypeError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not finite`,\n\t\t);\n\t}\n\n\tif (unit === null) {\n\t\treturn {kind: 'scale', value: numberValue, unit: null};\n\t}\n\n\tif (angleUnits.has(unit)) {\n\t\treturn {kind: 'rotate', value: numberValue, unit};\n\t}\n\n\tif (lengthUnits.has(unit)) {\n\t\treturn {kind: 'translate', value: numberValue, unit};\n\t}\n\n\tthrow new TypeError(\n\t\t`Cannot interpolate \"${value}\" because \"${unit}\" is not a supported translate or rotate unit`,\n\t);\n};\n\nconst parseTransformOriginLengthPercentage = ({\n\tcomponent,\n\tvalue,\n\tallowPercentage,\n}: {\n\tcomponent: string;\n\tvalue: string;\n\tallowPercentage: boolean;\n}): TransformOriginAxisValue => {\n\tconst match = cssNumberRegex.exec(component);\n\tif (match === null) {\n\t\tthrow new TypeError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`,\n\t\t);","sourceCodeStart":152,"sourceCodeEnd":188,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L152-L188","documentation":"Thrown by interpolate's string parser when a component has a unit that is neither a CSS angle unit (deg, rad, grad, turn) nor a CSS length unit (px, %, em, rem, vh, etc.). Bare numbers are treated as scale, angles as rotate, lengths as translate; anything else is rejected.","triggerScenarios":"Using an unsupported unit such as 's' (seconds), 'ms', 'dpi', 'fr', or a typo like 'pix' inside an interpolated transform string.","commonSituations":"Assuming any CSS unit is animatable; copy-paste of CSS values that include non-transform units; unit typos.","solutions":["Use only supported units: angles (deg, rad, grad, turn), lengths (px, %, em, rem, vw/vh, and the rest of the lengthUnits set), or no unit for scale.","Convert time-based units (s/ms) into the corresponding numeric value and animate separately.","Fix typos in the unit string (e.g. 'pix' -> 'px')."],"exampleFix":"// before\ninterpolate(frame, [0, 100], ['rotate(0trn)', 'rotate(90trn)']); // 'trn' unsupported\n\n// after\ninterpolate(frame, [0, 100], ['rotate(0turn)', 'rotate(90turn)']);","handlingStrategy":"validation","validationCode":"const SUPPORTED_UNITS = new Set(['deg','rad','grad','turn','%','px','em','rem','vh','vw','vmin','vmax','cm','mm','in','pt','pc','ch','ex']);\nfunction assertUnit(unit: string): void {\n  if (!SUPPORTED_UNITS.has(unit)) {\n    throw new TypeError(`Unsupported transform unit: ${unit}`);\n  }\n}","typeGuard":"const isSupportedUnit = (u: string): boolean => SUPPORTED_UNITS.has(u);","tryCatchPattern":null,"preventionTips":["Use only CSS angle or length units (or no unit for scale) in interpolated transforms.","Convert time-based units to plain numbers before animating.","Double-check unit spelling ('px' not 'pix', 'turn' not 'trn')."],"tags":["interpolate","transform","css","units","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}