remotion-dev/remotion · error · Error

outputStyles must have at least 2 elements

Error message

outputStyles must have at least 2 elements

What it means

Thrown by checkStylesRange when outputStylesRange has fewer than 2 elements. Like inputRange, at least two style snapshots are needed to define an interpolation segment, so a 0- or 1-element styles list is rejected.

Source

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

				`inputRange must contain only finite numbers, but got [${arr.join(
					',',
				)}]`,
			);
		}

		if (index > 0 && !(arr[index] > arr[index - 1])) {
			throw new Error(
				`inputRange must be strictly monotonically non-decreasing but got [${arr.join(
					',',
				)}]`,
			);
		}
	}
}

function checkStylesRange(arr: readonly Style[]) {
	if (arr.length < 2) {
		throw new Error('outputStyles must have at least 2 elements');
	}

	for (const index in arr) {
		if (typeof arr[index] !== 'object') {
			throw new Error('outputStyles must contain only objects');
		}
	}
}

/*
 * @description A function that interpolates between two styles based on an input range.
 * @see [Documentation](https://remotion.dev/docs/animation-utils/interpolate-styles)
 */
export const interpolateStyles = (
	input: number,
	inputRange: number[],
	outputStylesRange: Style[],
	options?: InterpolateOptions,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Provide at least 2 style objects whose count matches inputRange.length.
2. Validate outputStylesRange.length >= 2 before calling interpolateStyles.
3. If you only need one style, return it directly instead of interpolating.

Example fix

// before
interpolateStyles(frame, [0, 30], [{opacity: 1}]);

// after
interpolateStyles(frame, [0, 30], [{opacity: 1}, {opacity: 0}]);

if (!Array.isArray(outputStylesRange) || outputStylesRange.length < 2) {
  throw new Error('outputStyles must have at least 2 elements');
}

const hasMinTwoStyles = (arr: unknown): boolean =>
  Array.isArray(arr) && arr.length >= 2;

When it happens

Trigger: Calling interpolateStyles(frame, [0, 30], [{opacity: 1}]) with only one style; passing an empty styles array [] while the inputRange has multiple entries.

Common situations: Building the styles array dynamically and ending with one entry; a styles list whose length drifted from the inputRange length.

Related errors

• outputStyles must contain only objects
• outputRange can not be undefined
• inputRange (${inputRange.length}) and outputStylesRange (${o
• The start and end values must be of the same type. Start val
• Non-animatable values cannot be interpolated. Start value: $

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