Skip to main content

Premountingv4.0.140

Remotion only ever renders the current frame.
This means when a video or another asset is about to come up, it is not loaded by default.

note

Even though the video is soon about to appear, it is not yet loaded because Remotion only ever renders the current time.

What is premounting?​

Premounting is the practice of mounting a component containing assets earlier to allow assets some time to load before they appear.

note

The video is mounted earlier to give it some time to load.
It carries the style opacity: 0 to make it invisible. It's time defined by useCurrentFrame() is frozen at 0.

Premounting components​

From v5.0, all <Sequence> components are premounted for 1 second (fps frames) by default. You can opt out by passing premountFor={0}.

In v4, add the premountFor prop to the <Sequence> component to enable premounting.

<Video> and <Audio> from @remotion/media accept premountFor directly from v4.0.495. They remain layoutless, carry display: none while premounted and register the premounted range in the Studio timeline.

The number you pass is the number in frames you premount the component for.

Premounted.tsx
const MyComp: React.FC = () => {
  return (
    <Video
      from={100}
      premountFor={100}
      src={staticFile('bigbuckbunny.mp4')}
    />
  );
};

In the Remotion Studio, a premounted component is indicated with diagonal stripes:



A premounted <Sequence> does carry the styles opacity: 0 and pointer-events: none.

It is not possible to premount a <Sequence> with layout="none" because such a sequence does not have a container to apply the styles to.

Premounting visual componentsv4.0.528​

You can pass premountFor directly to these components:

These components keep their existing layout while premounted, with opacity: 0 and pointerEvents: 'none'. Their local frame stays at the first frame until from is reached.

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 together at frame 30, become visible at frame 60, and unmount at frame 150.

premountFor defaults to 0 in v4 and fps (1 second) in v5. Use styleWhilePremounted to override styles while premounted, including the default hiding styles.

Premounting only applies in the Player and Studio, not during rendering. A parent must also be mounted for its children to premount; set premountFor on the outer timed component when preparing a whole scene.

<Img>, <AnimatedImage> and <Gif> also support direct premounting. See their API pages for availability and behavior.

With <Series> and <TransitionSeries>​

premountFor is also available on <Series.Sequence> and <TransitionSeries.Sequence>.
It is not yet possible to premount a whole <Series> or <TransitionSeries>.

For custom components, see Make a component interactive.

Usage together with the buffer state​

If you also use the buffer state, <Video> and <Audio> from @remotion/media, as well as <Html5Audio>, <Html5Video>, <OffthreadVideo>, and <Img>, are aware of premounting and don't trigger the buffer state while in a premounted <Sequence>.

Otherwise it would lead to pausing playback while a scene is not even visible yet.

See also​