remotion-dev/remotion · error · TypeError

Cannot interpolate "${value}" because "${first} ${second}" i

Error message

Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair

What it means

Thrown by parseTwoTransformOriginKeywords when a two-keyword transform-origin pair resolves to zero valid candidates, i.e. both keywords target the same axis. left/right are x-only, top/bottom are y-only; pairing two from the same group leaves no cross-axis candidate so the value is ambiguous and rejected.

Source

Thrown at packages/core/src/interpolate.ts:260

	value: string,
): [TransformOriginAxisValue, TransformOriginAxisValue] => {
	const candidates: [TransformOriginAxisValue, TransformOriginAxisValue][] = [];
	for (const firstOption of transformOriginKeywordOptions(first)) {
		for (const secondOption of transformOriginKeywordOptions(second)) {
			if (firstOption.axis === secondOption.axis) {
				continue;
			}

			candidates.push(
				firstOption.axis === 'x'
					? [firstOption.value, secondOption.value]
					: [secondOption.value, firstOption.value],
			);
		}
	}

	if (candidates.length === 0) {
		throw new TypeError(
			`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`,
		);
	}

	return candidates[0];
};

const parseTransformOriginXY = (
	parts: string[],
	value: string,
): [TransformOriginAxisValue, TransformOriginAxisValue] => {
	if (parts.length === 1) {
		const token = parseTransformOriginToken(parts[0], value);
		if (token.type === 'length-percentage') {
			return [token.parsed, transformOriginCenter];
		}

		if (token.keyword === 'top' || token.keyword === 'bottom') {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pair one horizontal keyword with one vertical keyword: "left top", "right bottom", "center center".
2. Replace one keyword with an explicit length: "left 50%".

Example fix

// before
interpolate(t, [0, 1], ["left right", "center center"]);
// after
interpolate(t, [0, 1], ["left top", "center center"]);

const xKeys = new Set(['left', 'right']);
const yKeys = new Set(['top', 'bottom']);

function isValidTwoKeywordPair(a: string, b: string): boolean {
  const A = a.toLowerCase(), B = b.toLowerCase();
  if (A === 'center' || B === 'center') return true;
  const aX = xKeys.has(A), aY = yKeys.has(A);
  const bX = xKeys.has(B), bY = yKeys.has(B);
  return (aX && bY) || (aY && bX);
}

const parts = output.trim().split(/\s+/);
if (parts.length === 2 && parts.every((p) => /^(left|right|top|bottom|center)$/i.test(p))) {
  if (!isValidTwoKeywordPair(parts[0], parts[1])) throw new Error('Same-axis keyword pair');
}

When it happens

Trigger: A two-component transform-origin string where both tokens are keywords on the same axis: "left right", "right left", "top bottom", "bottom top".

Common situations: Authoring a transform-origin with two horizontal or two vertical keywords by mistake; copy-pasting CSS that relied on a different interpretation.

Related errors

• Cannot interpolate "${value}" because horizontal transform-o
• Cannot interpolate "${value}" because "${component}" is not
• bezier x values must be in [0, 1] range
• invalid color string ${color} provided
• input can not be undefined

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