remotion-dev/remotion · error · TypeError

The start and end values must be of the same type. Start val

Error message

The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}

What it means

Thrown by interpolateStyles inside interpolatedPropertyPart when the end-side decomposed part is undefined while interpolating a CSS value. This happens when a CSS function in the start value has more arguments than the same-named function in the end value (e.g. translate(10px, 20px) vs translate(10px)), so there is no end token to interpolate toward.

Source

Thrown at packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx:42

const interpolatedPropertyPart = ({
	inputValue,
	inputRange,
	initialStylePropertyPart,
	finalStylePropertyPart,
	initialStyleProperty,
	finalStyleProperty,
	options,
}: {
	inputValue: number;
	inputRange: number[];
	initialStylePropertyPart: UnitNumberAndFunction;
	finalStylePropertyPart: UnitNumberAndFunction;
	initialStyleProperty: CSSPropertiesValue;
	finalStyleProperty: CSSPropertiesValue;
	options: InterpolateStylesResolvedOptions;
}): string | number => {
	if (finalStylePropertyPart === undefined) {
		throw new TypeError(
			`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
		);
	}

	if (initialStylePropertyPart.color) {
		if (!finalStylePropertyPart.color) {
			throw new TypeError(
				`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
			);
		}

		const interpolatedColor = interpolateColors(inputValue, inputRange, [
			initialStylePropertyPart.color,
			finalStylePropertyPart.color as string,
		]);
		return `${interpolatedColor}`;
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Give the same-named CSS function the same argument count in every keyframe (pad missing args with identity values like 0px).
2. Keep the structure of every multi-part value identical across all outputStyles entries.
3. If argument counts must differ, split into separate interpolated properties rather than one transform string.

Example fix

// before
interpolateStyles(frame, [0, 30], [
  {transform: 'translate(100px, 50px)'},
  {transform: 'translate(200px)'},  // missing 2nd arg
]);

// after
interpolateStyles(frame, [0, 30], [
  {transform: 'translate(100px, 50px)'},
  {transform: 'translate(200px, 0px)'},
]);

// Ensure each CSS function has the same argument count on both sides.
const argCount = (fn: string) => {
  const inner = fn.slice(fn.indexOf('(') + 1, fn.lastIndexOf(')'));
  return inner.trim() === '' ? 0 : inner.split(',').length;
};
const sameFunctionShape = (a: string, b: string) =>
  a.split(/\s+/).every((part, i) => {
    const bp = b.split(/\s+/)[i];
    return bp && part.split('(')[0] === bp.split('(')[0] && argCount(part) === argCount(bp);
  });
// usage: sameFunctionShape(startStyle.transform, endStyle.transform)

// Fall back to the nearest keyframe style if interpolation is impossible.
let style: React.CSSProperties;
try {
  style = interpolateStyles(frame, range, styles);
} catch (e) {
  if (e instanceof TypeError && /same type/.test(e.message)) {
    style = frame < range[Math.floor(range.length / 2)] ? styles[0] : styles[styles.length - 1];
  } else {
    throw e;
  }
}

When it happens

Trigger: outputStyles keyframes where a transform function carries a different argument count on each side: start {transform: 'translate(100px, 50px)'} (2 args) to end {transform: 'translate(200px)'} (1 arg); or a function arg present on one side and absent on the other.

Common situations: Authoring keyframes incrementally and forgetting the second coordinate; refactoring a transform and dropping an argument in one keyframe; copy-pasting shorthand values that decompose asymmetrically.

Related errors

• The start and end values must have the same structure. Start
• Non-animatable values cannot be interpolated. Start value: $
• The units of the start and end values must match. Start valu
• input ${input} does not end with a valid unit. Valid units a
• input ${input} is not a valid transform. Must be a number or

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/ac5dc2af09b50768. Report an issue: GitHub.