{"record":{"id":"18d7aaa5e32f8ff3","repo":"remotion-dev/remotion","slug":"inputrange-inputrange-length-and-outputstyles","errorCode":null,"errorMessage":"inputRange (${inputRange.length}) and outputStylesRange (${outputStylesRange.length}) must have the same length","messagePattern":"inputRange \\((.+?)\\) and outputStylesRange \\((.+?)\\) must have the same length","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx","lineNumber":294,"sourceCode":"\tinput: number,\n\tinputRange: number[],\n\toutputStylesRange: Style[],\n\toptions?: InterpolateOptions,\n) => {\n\tif (typeof input === 'undefined') {\n\t\tthrow new Error('input can not be undefined');\n\t}\n\n\tif (typeof inputRange === 'undefined') {\n\t\tthrow new Error('inputRange can not be undefined');\n\t}\n\n\tif (typeof outputStylesRange === 'undefined') {\n\t\tthrow new Error('outputRange can not be undefined');\n\t}\n\n\tif (inputRange.length !== outputStylesRange.length) {\n\t\tthrow new Error(\n\t\t\t'inputRange (' +\n\t\t\t\tinputRange.length +\n\t\t\t\t') and outputStylesRange (' +\n\t\t\t\toutputStylesRange.length +\n\t\t\t\t') must have the same length',\n\t\t);\n\t}\n\n\tcheckInputRange(inputRange);\n\tcheckStylesRange(outputStylesRange);\n\n\tassertValidInterpolatePosterizeOption(options?.posterize);\n\tconst posterizedInput =\n\t\toptions?.posterize === undefined\n\t\t\t? input\n\t\t\t: Math.floor(input / options.posterize) * options.posterize;\n\n\tlet startIndex = inputRange.findIndex((step) => posterizedInput < step) - 1;","sourceCodeStart":276,"sourceCodeEnd":312,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx#L276-L312","documentation":"Thrown by interpolateStyles when inputRange and outputStylesRange have different lengths. Each input frame value must map to exactly one output style, so the two arrays must be the same length; a mismatch means a keyframe is missing its style or vice versa.","triggerScenarios":"Passing 3 input values but only 2 styles, or 2 input values with 3 styles; dynamically building one array from different data than the other.","commonSituations":"Editing keyframes and forgetting to update both arrays; generating ranges and styles from separate loops that diverge; appending a keyframe to one array only.","solutions":["Assert inputRange.length === outputStylesRange.length before calling interpolateStyles.","Build both arrays from a single keyframe-definition source so they cannot diverge.","Add a unit test that checks length equality for your keyframe data."],"exampleFix":"// before\ninterpolateStyles(frame, [0, 10, 30], [{opacity: 1}, {opacity: 0}]);  // 3 vs 2\n\n// after\ninterpolateStyles(frame, [0, 10, 30], [{opacity: 1}, {opacity: 0.5}, {opacity: 0}]);","handlingStrategy":"validation","validationCode":"if (inputRange.length !== outputStylesRange.length) {\n  throw new Error(\n    `Length mismatch: inputRange=${inputRange.length}, styles=${outputStylesRange.length}`,\n  );\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Build inputRange and outputStylesRange from a single keyframe-definition array so they cannot diverge.","Assert length equality before every interpolateStyles call.","Add a unit test that verifies the two arrays stay in sync."],"tags":["interpolate-styles","input-range","output-styles","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}