ContextQMD
Back to Remotion

interpolateStyles()

packages/docs/docs/animation-utils/interpolate-styles.mdx

4.0.4661.8 KB
Original Source

Part of the @remotion/animation-utils package.

This function provides a convenient way to interpolate styles based on a specified range of values, allowing for smooth animations between different styles.

Example

tsx
// ---cut---
import {
  interpolateStyles,
  makeTransform,
  translateY,
} from "@remotion/animation-utils";

const MyComponent: React.FC = () => {
  const animatedStyles = interpolateStyles(
    15,
    [0, 30, 60],
    [
      { opacity: 0, transform: makeTransform([translateY(-50)]) },
      { opacity: 1, transform: makeTransform([translateY(0)]) },
      { opacity: 0, transform: makeTransform([translateY(50)]) },
    ],
  );

  return <div style={animatedStyles} />;
};

API

A function that takes 3-4 arguments:

  1. The input value.
  2. The range of values that you expect the input to assume.
  3. The range of output styles that you want the input to map to.
  4. Options object with the same keys as interpolate() (extrapolateLeft, extrapolateRight, easing), including a per-segment easing array when you have more than two keyframes. Optional.

Return value

  • A style object representing the interpolated styles based on the current frame.

Usage Notes

  • Ensure that the inputRange and outputStylesRange arrays contain at least two values to facilitate interpolation between styles.

  • The outputStylesRange array must have the same number of elements as inputRange. Each style in outputStylesRange corresponds to a specific value in the input range.

See also