remotion-dev/remotion · error · TypeError

translate3d() supports only the following signatures: transl

Error message

translate3d() supports only the following signatures:
translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)
translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)

What it means

`translate3d()` accepts only exactly 3 arguments (all length/percentage-or-number, x/y use LengthPercentageUnit, z uses LengthUnit) or exactly 6 arguments (three number/unit pairs). Any other arity (0, 1, 2, 4, 5, 7+) or a 6-arg call where x/y/z are not all numbers falls through to this exhaustive signature list.

Source

Thrown at packages/animation-utils/src/transformation-helpers/make-transform/transform-functions.ts:468

		return `translate3d(${vars.join(', ')})`;
	}

	if (arguments.length === 6) {
		const [x, unitX, y, unitY, z, unitZ] = args;
		if (
			typeof x === 'number' &&
			typeof y === 'number' &&
			typeof z === 'number'
		) {
			checkNumber({num: x, param: 'x', api: 'translate3d'});
			checkNumber({num: y, param: 'y', api: 'translate3d'});
			checkNumber({num: z, param: 'z', api: 'translate3d'});
			return `translate3d(${x}${unitX}, ${y}${unitY}, ${z}${unitZ})`;
		}
	}

	throw new TypeError(
		[
			`translate3d() supports only the following signatures:`,
			`translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)`,
			`translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)`,
		].join('\n'),
	);
}

function translateX(x: LengthPercentageUnitString): string;
function translateX(x: number, unit?: LengthPercentageUnit): string;
function translateX(x: unknown, unit: LengthPercentageUnit = 'px'): string {
	if (isUnitWithString(x, lengthPercentageUnits)) {
		return `translateX(${x})`;
	}

	checkNumber({num: x, param: 'x', api: 'translateX'});

	return `translateX(${x}${unit})`;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Use the 3-arg form with unit strings or numbers: `translate3d('10px', '20px', '5px')` or `translate3d(10, 20, 5)`.
Or use the 6-arg form with three number/unit pairs: `translate3d(10, 'px', 20, 'px', 30, 'px')`.
Ensure all three axes are provided; if you only need x/y, use `translate` instead.
Drop `as any` so the overload signatures enforce correct arity.

Example fix

// before
const t = translate3d(10, 20); // missing z

// after
const t = translate3d(10, 20, 0);

Defensive patterns

Strategy: validation

Validate before calling

// Validate translate3d() arity/types before calling.
const isLengthNumberOrString = (v: unknown): boolean =>
  typeof v === 'number' ||
  (typeof v === 'string' && Number.isFinite(Number(v.replace(/[a-z%]+$/i, ''))));

// Rule of thumb: pass exactly 3 args (numbers or unit strings) or exactly 6 (number/unit pairs).
if (![3, 6].includes(args.length)) throw new Error('translate3d needs 3 or 6 args');

Type guard

const isTranslate3dShortForm = (
  args: unknown[],
): args is [string | number, string | number, string | number] =>
  args.length === 3 && args.every((a) => typeof a === 'number' || typeof a === 'string');

const isTranslate3dLongForm = (
  args: unknown[],
): args is [number, string, number, string, number, string] =>
  args.length === 6 &&
  [0, 2, 4].every((i) => typeof args[i] === 'number') &&
  [1, 3, 5].every((i) => typeof args[i] === 'string');

Prevention

Always provide all three (x, y, z) components to translate3d.
Use the 3-arg form (`translate3d(10, 20, 0)`) unless you need mixed units, then use the 6-arg form.
If you only need x/y translation, use `translate` instead of `translate3d`.
Drop `as any` so the overload list enforces arity.

When it happens

Trigger: Calling `translate3d(10, 20)` (2 args); `translate3d('10px', '20px')` (2 args); `translate3d(10, 'px', 20, 'px', 30)` (5 args); `translate3d(10, 'px', 20, 'px', '30', 'px')` (third value is a string, not a number, in the 6-arg form); `translate3d()` with no args.

Common situations: Forgetting the z component (treating translate3d like translate); mixing the 3-arg and 6-arg forms; passing unit strings inconsistently across the three axes; building calls from arrays of differing lengths.

Related errors

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