Skip to main content

Premountingv4.0.140

Premounting mounts a component before it appears, giving images, videos, and animations time to load and initialize. It applies in the Player and Studio, and has no effect during rendering.

What is premounting?​

Without premounting, a component mounts when its time range begins. Its assets may still be loading when they should become visible:

With premounting, the component mounts earlier, stays hidden, and waits at its first frame until its time range begins:

Premounting components​

Pass premountFor directly to the component you want to prepare. The value is the number of frames before its start at which it should mount.

Containers with a layout prop must use layout="absolute-fill" for premounting, including default premounting.

For example, this image mounts at frame 30 and becomes visible at frame 60:

PremountedImage.tsx
import {Img, staticFile} from 'remotion';

export const PremountedImage: React.FC = () => {
  return (
    <Img
      from={60}
      premountFor={30}
      src={staticFile('logo.png')}
      width={200}
    />
  );
};

The same from={60} and premountFor={30} values work on a video, a Lottie animation, or any of the other components above. Each gets 30 frames to prepare before its start.

While premounted, components are hidden and do not respond to pointer events. Use styleWhilePremounted to customize these styles.

In the Studio timeline, diagonal stripes indicate the premounted range:

A premounted range shown with diagonal stripes in the Studio timeline

Premounting a whole scene​

Set premountFor on a container such as <AbsoluteFill> to prepare its children together:

PremountedScene.tsx
import {AbsoluteFill, Img, staticFile} from 'remotion';

export const PremountedScene: React.FC = () => {
  return (
    <AbsoluteFill from={60} durationInFrames={90} premountFor={30}>
      <Img src={staticFile('logo.png')} width={200} />
      <h1>Welcome</h1>
    </AbsoluteFill>
  );
};

The image and heading mount at frame 30, become visible at frame 60, and unmount at frame 150.

A child can only premount while its parent is mounted. Premount the outer container when its children need to load before the scene starts.

For custom components, see Make a component interactive.

Default premount durationv4.0.534​

Use defaultPremountInSeconds to premount components without setting premountFor on each one. The default is 0 seconds in v4 and 2 seconds in v5, for both Studio and Player.

In the Studio, configure it with Config.setDefaultPremountInSeconds(), the --default-premount-in-seconds CLI flag, or the Studio settings. The empty template already sets 2 seconds in its config file.

In the Player, pass the defaultPremountInSeconds prop:

MyPlayer.tsx
export const MyPlayer: React.FC = () => {
  return (
    <Player
      component={MyComposition}
      durationInFrames={150}
      fps={30}
      compositionWidth={1920}
      compositionHeight={1080}
      defaultPremountInSeconds={2}
    />
  );
};

Seconds are converted to frames using the composition FPS and rounded to the nearest frame. At 30 FPS, 2 seconds means 60 frames of premounting.

An explicit premountFor overrides the default. Pass premountFor={0} to disable premounting for a component.

Usage together with the buffer state​

Loading an invisible component should not pause playback. Components that support the buffer state, such as <Video>, <Audio>, and <Img>, do not trigger it while premounted. This also applies to <Html5Audio>, <Html5Video>, and <OffthreadVideo> inside a premounted scene.

If an asset is still loading when it becomes visible, it can trigger the buffer state according to its buffering settings.

See also​