remotion-dev/remotion · error · TypeError

The start and end values must have the same structure. Start

Error message

The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}

What it means

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.

Source

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

	options: InterpolateStylesResolvedOptions;
}) => {
	if (
		typeof initialStyleProperty !== typeof finalStyleProperty &&
		initialStyleProperty !== 0 &&
		finalStyleProperty !== 0
	) {
		throw new TypeError(
			`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
		);
	}

	const initialStylePropertyParts =
		breakDownValueIntoUnitNumberAndFunctions(initialStyleProperty);
	const finalStylePropertyParts =
		breakDownValueIntoUnitNumberAndFunctions(finalStyleProperty);

	if (initialStylePropertyParts.length !== finalStylePropertyParts.length) {
		throw new TypeError(
			`The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
		);
	}

	const interpolatedValue = initialStylePropertyParts.reduce(
		(acc, initialStylePropertyPart, index) => {
			return `${acc} ${interpolatedPropertyPart({
				inputValue,
				inputRange,
				initialStylePropertyPart,
				finalStylePropertyPart: finalStylePropertyParts[index],
				initialStyleProperty,
				finalStyleProperty,
				options,
			})}`;
		},
		'',
	);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Provide the same number of space-separated parts in every keyframe for the property.
2. For transforms, list every function in the same order in all keyframes, using identity values for unused ones.
3. Avoid changing the structure of multi-part values (argument count, function count) between keyframes.

Example fix

// before
interpolateStyles(frame, [0, 30], [
  {transform: 'translate(10px) rotate(5deg)'},  // 2 parts
  {transform: 'translate(20px)'},               // 1 part
]);

// after
interpolateStyles(frame, [0, 30], [
  {transform: 'translate(10px) rotate(5deg)'},
  {transform: 'translate(20px) rotate(5deg)'},
]);

// Compare space-separated part counts of multi-part string values.
const partCount = (v: unknown): number =>
  typeof v === 'string' ? v.trim().split(/\s+/).length : 1;
const sameStructure = (a: unknown, b: unknown): boolean => partCount(a) === partCount(b);
// usage: sameStructure(startStyle.transform, endStyle.transform)

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• The start and end values must be of the same type. Start val
• 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/d0fdcff2bed24485. Report an issue: GitHub.