{"record":{"id":"08a11f5490c9f1d0","repo":"Popmotion/popmotion","slug":"both-input-and-output-ranges-must-be-the-same-leng","errorCode":null,"errorMessage":"Both input and output ranges must be the same length","messagePattern":"Both input and output ranges must be the same length","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/popmotion/src/utils/interpolate.ts","lineNumber":125,"sourceCode":" *   - Colors (hex, hsl, hsla, rgb, rgba)\n *   - Complex (combinations of one or more numbers or strings)\n *\n * ```jsx\n * const mixColor = interpolate([0, 1], ['#fff', '#000'])\n *\n * mixColor(0.5) // 'rgba(128, 128, 128, 1)'\n * ```\n *\n * @public\n */\nexport function interpolate<T>(\n  input: number[],\n  output: T[],\n  { clamp: isClamp = true, ease, mixer }: InterpolateOptions<T> = {}\n) {\n  const inputLength = input.length;\n\n  invariant(\n    inputLength === output.length,\n    'Both input and output ranges must be the same length'\n  );\n\n  invariant(\n    !ease || !Array.isArray(ease) || ease.length === inputLength - 1,\n    'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.'\n  );\n\n  // If input runs highest -> lowest, reverse both arrays\n  if (input[0] > input[inputLength - 1]) {\n    input = [].concat(input);\n    output = [].concat(output);\n    input.reverse();\n    output.reverse();\n  }\n\n  const mixers = createMixers(output, ease, mixer);","sourceCodeStart":107,"sourceCodeEnd":143,"githubUrl":"https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/interpolate.ts#L107-L143","documentation":"This invariant in `interpolate` enforces that the input range and output range arrays have exactly the same number of entries, because each input value maps 1:1 to an output value when interpolating. The library throws immediately (via `invariant`) rather than guessing a mapping, since a length mismatch makes the interpolation undefined. It applies to `interpolate`/`createInterpolator` and any `animate` call that ends up building an interpolator.","triggerScenarios":"Calling `interpolate([0, 0.5, 1], ['0px', '100px'])` (output has fewer items), or `interpolate([0, 1], ['0px','50px','100px'])`, or passing a mismatched range array from dynamic data (e.g. keyframe arrays built at runtime) into `createInterpolator`/`animate`.","commonSituations":"Generating keyframes programmatically where a value is added to one array but not the other; refactoring code and removing an output value while leaving the input stops; passing user-supplied keyframe configs of unequal length.","solutions":["Make `output.length === input.length` — every input stop must have exactly one corresponding output value","Log both arrays (`input.length` vs `output.length`) before the call to find which is wrong","If you intended the same output over a range, repeat the value, e.g. `interpolate([0,0.5,1],['0px','0px','100px'])`","Validate dynamic keyframe data before passing it to `animate`/`interpolate`"],"exampleFix":"// before\nconst x = interpolate([0, 0.5, 1], ['0px', '100px']);\n// after\nconst x = interpolate([0, 0.5, 1], ['0px', '100px', '200px']);","handlingStrategy":"validation","validationCode":"function validateRanges(input, output) {\n  if (input.length !== output.length) {\n    throw new Error(`interpolate: input has ${input.length} stops but output has ${output.length} values`);\n  }\n  return [input, output];\n}\n// usage: validateRanges(input, output) before calling interpolate(input, output)","typeGuard":"function hasMatchingRanges<T>(input: number[], output: T[]): input is number[] & { length: T['length'] } {\n  return input.length === output.length;\n}","tryCatchPattern":null,"preventionTips":["Always build input and output arrays from the same source loop so lengths stay in sync","Assert `input.length === output.length` in tests for any dynamic keyframe config","Remember: one output value per input stop; repeat values for flat segments","Never mutate one range array after passing both to interpolate"],"tags":["interpolation","range-mismatch","validation","animation"],"backgroundTag":"interpolate-range-length-mismatch","analyzedSha":"adf681efd8568ada018ce68082dbd585f25c4c7d","analyzedAt":"2026-09-02T10:01:11.645Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T16:17:10.729Z"}