{"record":{"id":"d0fdcff2bed24485","repo":"remotion-dev/remotion","slug":"the-start-and-end-values-must-have-the-same-struct","errorCode":null,"errorMessage":"The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}","messagePattern":"The start and end values must have the same structure\\. Start value: (.+?), end value: (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":163,"sourceCode":"\toptions: InterpolateStylesResolvedOptions;\n}) => {\n\tif (\n\t\ttypeof initialStyleProperty !== typeof finalStyleProperty &&\n\t\tinitialStyleProperty !== 0 &&\n\t\tfinalStyleProperty !== 0\n\t) {\n\t\tthrow new TypeError(\n\t\t\t`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,\n\t\t);\n\t}\n\n\tconst initialStylePropertyParts =\n\t\tbreakDownValueIntoUnitNumberAndFunctions(initialStyleProperty);\n\tconst finalStylePropertyParts =\n\t\tbreakDownValueIntoUnitNumberAndFunctions(finalStyleProperty);\n\n\tif (initialStylePropertyParts.length !== finalStylePropertyParts.length) {\n\t\tthrow new TypeError(\n\t\t\t`The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,\n\t\t);\n\t}\n\n\tconst interpolatedValue = initialStylePropertyParts.reduce(\n\t\t(acc, initialStylePropertyPart, index) => {\n\t\t\treturn `${acc} ${interpolatedPropertyPart({\n\t\t\t\tinputValue,\n\t\t\t\tinputRange,\n\t\t\t\tinitialStylePropertyPart,\n\t\t\t\tfinalStylePropertyPart: finalStylePropertyParts[index],\n\t\t\t\tinitialStyleProperty,\n\t\t\t\tfinalStyleProperty,\n\t\t\t\toptions,\n\t\t\t})}`;\n\t\t},\n\t\t'',\n\t);","sourceCodeStart":145,"sourceCodeEnd":181,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L145-L181","documentation":"Thrown by interpolateStyles when the start and end CSS values decompose into different numbers of space-separated parts. Multi-part values like '10px 20px' (2 parts), 'translate(10px) rotate(5deg)' (2 parts), or box-shadow shorthands must have matching part counts on both sides so each part has a counterpart to interpolate.","triggerScenarios":"Box-shadow or transform strings with different token counts: start {transform: 'translate(10px) rotate(5deg)'} (2 parts) to end {transform: 'translate(20px)'} (1 part); background shorthand with differing value counts.","commonSituations":"Adding or removing a transform function in one keyframe but not the others; shorthand CSS with varying argument counts across keyframes; keyframes where one step omits a value.","solutions":["Provide the same number of space-separated parts in every keyframe for the property.","For transforms, list every function in the same order in all keyframes, using identity values for unused ones.","Avoid changing the structure of multi-part values (argument count, function count) between keyframes."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 30], [\n  {transform: 'translate(10px) rotate(5deg)'},  // 2 parts\n  {transform: 'translate(20px)'},               // 1 part\n]);\n\n// after\ninterpolateStyles(frame, [0, 30], [\n  {transform: 'translate(10px) rotate(5deg)'},\n  {transform: 'translate(20px) rotate(5deg)'},\n]);","handlingStrategy":"validation","validationCode":"// Compare space-separated part counts of multi-part string values.\nconst partCount = (v: unknown): number =>\n  typeof v === 'string' ? v.trim().split(/\\s+/).length : 1;\nconst sameStructure = (a: unknown, b: unknown): boolean => partCount(a) === partCount(b);\n// usage: sameStructure(startStyle.transform, endStyle.transform)","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Provide the same number of space-separated parts in every keyframe for multi-part properties.","Keep transform function lists the same length and order across keyframes.","Validate structure equality in a unit test for your keyframe data."],"tags":["interpolate-styles","transform","validation","css"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}