Skip to main content

interpolateTranslate()v4.0.472

Allows you to map a range of values to CSS translate values using pixel units.

API​

Takes three to four arguments:

  1. The input value.
  2. The range of values that you expect the input to assume.
  3. The range of output translate values that you want the input to map to.
  4. Options object. Optional.

inputRange and outputRange must have the same length and at least one translate value. With one translate value, interpolateTranslate() always returns the only output value.

The translate values may contain one, two, or three space-separated px values, for example 0px, 0px 59px, or 0px 59px 10px. All output values must use the same number of values.

Returns​

A CSS translate value using px units.

Example​

import {interpolateTranslate, useCurrentFrame} from 'remotion';

const frame = useCurrentFrame();

const translate = interpolateTranslate(frame, [0, 30], ['0px 59px', '100px 0px']);

This returns 50px 29.5px at frame 15.

You can use the value with the CSS translate property:

import {interpolateTranslate, useCurrentFrame} from 'remotion';

export const MyComposition: React.FC = () => {
  const frame = useCurrentFrame();
  const translate = interpolateTranslate(frame, [0, 30], ['0px 59px', '100px 0px']);

  return <div style={{translate}}>Hello</div>;
};

Supported units​

Only px values are supported. Other CSS units such as %, rem, em, vw, or unitless values will throw an error.

Options​

The options are the same as interpolate():

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​