Skip to main content

useTransform

Map one or more motion values into a new one.

useTransform creates a motion value derived from others. It has two forms: range mapping and a transformer function.

drag x

Range mapping

		const x = useMotionValue(0);
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0]);

The input range must be a linear series — all increasing or all decreasing. The output range can be numbers, colours, shadows or any other value type Motion Start can interpolate, as long as every entry is the same type and format.

		const background = useTransform(
	x,
	[-140, 0, 140],
	["#e11d48", "#a855f7", "#10b981"]
);

Options are passed as a fourth argument:

		const opacity = useTransform(x, [0, 100], [0, 1], { clamp: false, ease: easeOut });

Transformer functions

		const time = useTime();
const wobble = useTransform(time, (t) => Math.sin(t / 1000) * 10);

Multiple inputs are supported — the transformer receives an array:

		const x = useMotionValue(0);
const y = useMotionValue(0);
const distance = useTransform([x, y], ([latestX, latestY]) =>
	Math.hypot(latestX, latestY)
);