remotion-dev/remotion · error · TypeError

Non-animatable values cannot be interpolated. Start value: $

Error message

Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}

What it means

Thrown by interpolateStyles when a decomposed part has no numeric component (it is a keyword or unit-only token like 'auto', 'none', or a bare keyword) and the start and end units differ. Without a number to blend, mismatched keyword tokens cannot be interpolated, so the library rejects the pair.

Source

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

						inputRange,
						initialStylePropertyPart: startValuePartFunctionArg,
						finalStylePropertyPart: endValuePartFunctionArg,
						initialStyleProperty,
						finalStyleProperty,
						options,
					});
					return `${acc}, ${interpolatedArg}`;
				},
				'',
			);
		return `${
			initialStylePropertyPart.function.name
		}(${interpolatedFunctionArgs.slice(2)})`;
	}

	if (typeof initialStylePropertyPart.number === 'undefined') {
		if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit) {
			throw new TypeError(
				`Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
			);
		}

		return `${initialStylePropertyPart.unit}`;
	}

	if (
		initialStylePropertyPart.unit !== finalStylePropertyPart.unit &&
		initialStylePropertyPart.number !== 0 &&
		finalStylePropertyPart.number !== 0
	) {
		throw new TypeError(
			`The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`,
		);
	}

	const startNumber = initialStylePropertyPart.number;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Only interpolate properties whose values are numeric, numeric+unit, colors, or same-named functions.
2. Keep keyword-only values constant across keyframes and animate a different numeric property instead.
3. For discrete changes, switch the value at a frame boundary rather than passing it through interpolateStyles.

Example fix

// before
interpolateStyles(frame, [0, 30], [
  {display: 'auto'},
  {display: 'block'},  // non-animatable keywords
]);

// after — switch discretely instead of interpolating
const display = frame < 15 ? 'auto' : 'block';

const NUMERIC_OR_COLOR = /^-?\d+(\.\d+)?([a-z%]*)|#|^(rgb|hsl|okl)/i;
const isAnimatable = (v: unknown): boolean =>
  typeof v === 'number' || (typeof v === 'string' && NUMERIC_OR_COLOR.test(v.trim()));
// Skip interpolateStyles for any property whose values are not animatable.

When it happens

Trigger: Interpolating keyword-only values where the keywords differ: {display: 'auto'} to {display: 'block'}; or grid-template shorthand tokens whose unit-only parts disagree.

Common situations: Trying to animate non-numeric CSS properties (display, position, visibility, white-space); authoring keyframes with different keyword values for the same property.

Related errors

• The start and end values must be of the same type. Start val
• The units of the start and end values must match. Start valu
• The start and end values must have the same structure. Start
• inputRange must have at least 2 elements
• inputRange must contain only numbers

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