{"record":{"id":"9c4e46468bba1d28","repo":"remotion-dev/remotion","slug":"non-animatable-values-cannot-be-interpolated-star","errorCode":null,"errorMessage":"Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}","messagePattern":"Non-animatable values cannot be interpolated\\. Start value: (.+?), end value: (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":98,"sourceCode":"\t\t\t\t\t\tinputRange,\n\t\t\t\t\t\tinitialStylePropertyPart: startValuePartFunctionArg,\n\t\t\t\t\t\tfinalStylePropertyPart: endValuePartFunctionArg,\n\t\t\t\t\t\tinitialStyleProperty,\n\t\t\t\t\t\tfinalStyleProperty,\n\t\t\t\t\t\toptions,\n\t\t\t\t\t});\n\t\t\t\t\treturn `${acc}, ${interpolatedArg}`;\n\t\t\t\t},\n\t\t\t\t'',\n\t\t\t);\n\t\treturn `${\n\t\t\tinitialStylePropertyPart.function.name\n\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;","sourceCodeStart":80,"sourceCodeEnd":116,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L80-L116","documentation":"Thrown by interpolateStyles when a decomposed part has no numeric component (it is a keyword or unit-only token like 'auto', 'none', or a bare keyword) and the start and end units differ. Without a number to blend, mismatched keyword tokens cannot be interpolated, so the library rejects the pair.","triggerScenarios":"Interpolating keyword-only values where the keywords differ: {display: 'auto'} to {display: 'block'}; or grid-template shorthand tokens whose unit-only parts disagree.","commonSituations":"Trying to animate non-numeric CSS properties (display, position, visibility, white-space); authoring keyframes with different keyword values for the same property.","solutions":["Only interpolate properties whose values are numeric, numeric+unit, colors, or same-named functions.","Keep keyword-only values constant across keyframes and animate a different numeric property instead.","For discrete changes, switch the value at a frame boundary rather than passing it through interpolateStyles."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 30], [\n  {display: 'auto'},\n  {display: 'block'},  // non-animatable keywords\n]);\n\n// after — switch discretely instead of interpolating\nconst display = frame < 15 ? 'auto' : 'block';","handlingStrategy":"validation","validationCode":"const NUMERIC_OR_COLOR = /^-?\\d+(\\.\\d+)?([a-z%]*)|#|^(rgb|hsl|okl)/i;\nconst isAnimatable = (v: unknown): boolean =>\n  typeof v === 'number' || (typeof v === 'string' && NUMERIC_OR_COLOR.test(v.trim()));\n// Skip interpolateStyles for any property whose values are not animatable.","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Do not pass keyword-only properties (display, position, visibility) through interpolateStyles.","Switch discrete values at a frame boundary instead of interpolating.","Keep keyword values constant and animate a different numeric property."],"tags":["interpolate-styles","css","validation","keyword"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}