{"record":{"id":"84ad5a29ba581387","repo":"remotion-dev/remotion","slug":"the-playbackrate-prop-must-be-a-number-or-undefi","errorCode":null,"errorMessage":"The \"playbackRate\" prop must be a number or undefined, but is ${JSON.stringify(playbackRate)}","messagePattern":"The \"playbackRate\" prop must be a number or undefined, but is (.+?)","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/lottie/src/validate-playbackrate.ts","lineNumber":7,"sourceCode":"export const validatePlaybackRate = (playbackRate: unknown) => {\n\tif (typeof playbackRate === 'undefined') {\n\t\treturn;\n\t}\n\n\tif (typeof playbackRate !== 'number') {\n\t\tthrow new TypeError(\n\t\t\t`The \"playbackRate\" prop must be a number or undefined, but is ${JSON.stringify(\n\t\t\t\tplaybackRate,\n\t\t\t)}`,\n\t\t);\n\t}\n\n\tif (Number.isNaN(playbackRate) || !Number.isFinite(playbackRate)) {\n\t\tthrow new TypeError(\n\t\t\t`The \"playbackRate\" props must be a real number, but is ${playbackRate}`,\n\t\t);\n\t}\n\n\tif (playbackRate <= 0) {\n\t\tthrow new TypeError(\n\t\t\t`The \"playbackRate\" props must be positive, but is ${playbackRate}`,\n\t\t);\n\t}\n};","sourceCodeStart":1,"sourceCodeEnd":25,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/lottie/src/validate-playbackrate.ts#L1-L25","documentation":"validatePlaybackRate rejects any `playbackRate` prop that is not undefined or a number; it separately rejects NaN and non-finite values. The component then applies this rate to the Lottie timeline, so a non-numeric value would break frame mapping.","triggerScenarios":"Passing playbackRate as a string (e.g. '2'), null, or a value computed from arithmetic that yields NaN/Infinity.","commonSituations":"Reading playbackRate from config/URL as a string; computing rate = base/speed where speed can be 0; passing 0 thinking it means 'normal' (use 1 for normal).","solutions":["Pass a finite positive/negative number; use 1 for normal speed.","Coerce with Number() and validate Number.isFinite before passing.","If the source may be missing, fall back to 1 (or omit the prop).","Avoid 0 — it stops the animation; use delayRender/Sequence instead."],"exampleFix":"// before\n<Lottie animationData={anim} playbackRate={'2x'} />\n// after\nconst rate = Number(rawRate);\n<Lottie animationData={anim} playbackRate={Number.isFinite(rate) && rate !== 0 ? rate : 1} />","handlingStrategy":"type-guard","validationCode":"function asPlaybackRate(v: unknown): number | undefined {\n  if (typeof v === 'undefined') return undefined;\n  const n = Number(v);\n  return Number.isFinite(n) && n !== 0 ? n : 1;\n}","typeGuard":"const isFinitePlaybackRate = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v) && v !== 0;","tryCatchPattern":null,"preventionTips":["Pass a finite, non-zero number; use 1 for normal speed.","Coerce from strings with Number() and validate Number.isFinite before passing.","Avoid 0 — it stalls the animation; use delayRender/Sequence instead.","Type the wrapper prop as `playbackRate?: number` to surface string values at compile time."],"tags":["typescript","lottie","validation","props","numbers"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}