Skip to main content

Animating properties

Animation works by changing properties over time.
For example: To fade the text in over two seconds, gradually change its opacity from 0 to 1.

FadeIn.tsx
const FadeInInner = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <Interactive.Div
      style={{
        fontSize: 80,
        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {
          extrapolateLeft: "clamp",
          extrapolateRight: "clamp",
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};

export const FadeIn = Interactive.withSchema({
  Component: FadeInInner,
  componentName: "FadeIn",
  schema: {},
  wrapInSequence: true,
  layout: "absolute-fill",
});

Easing​

Add an easing option to apply a curve from Easing:

SlideIn.tsx
<Interactive.Div
  style={{
    translate: interpolate(frame, [0, 2 * fps], ["0px 240px", "0px 0px"], {
      easing: Easing.bezier(0.42, 0, 0.58, 1),
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    }),
  }}
>
  Hello World!
</Interactive.Div>

See Easing for more curves.

Posterization​

Posterization makes an animation update in steps.
Sometimes this is useful for creating a certain style.

SlideIn.tsx
<Interactive.Div
  style={{
    translate: interpolate(frame, [0, 2 * fps], ["0px 240px", "0px 0px"], {
      easing: Easing.bezier(0.42, 0, 0.58, 1),
      posterize: 3,
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    }),
  }}
>
  Hello World!
</Interactive.Div>

With posterize: 3, the position changes only every three frames.

Always animate using useCurrentFrame()​

Watch out for flickering issues during rendering that arise if you write animations that are not driven by useCurrentFrame() – for example CSS transitions.

Read more about how Remotion's rendering works - understanding it will help you avoid issues down the road.

Interactivity guidelines​

Using interpolate() on inline properties is recommended, because it will show up as keyframes in the Remotion Studio.
See also: Interactivity best practices

See also​