Skip to main content

<Freeze>v2.2.0

Recommendation: <Sequence freeze>​

For new code, prefer <Sequence freeze> if you want to freeze a timeline item. The freeze prop is supported by Studio interactivity, so it can be edited visually.

MyComp.tsx
import {Sequence} from 'remotion';

const MyVideo = () => {
  return (
    <Sequence freeze={30}>
      <BlueSquare />
    </Sequence>
  );
};

When using the <Freeze/> component, all of its children will freeze to the frame that you specify as a prop.

If a component is a child of <Freeze/>, calling the useCurrentFrame() hook will always return the frame number you specify, irrespective of any <Sequence>.

<Video>, <OffthreadVideo /> and <Html5Video /> elements will be paused and <Audio> and <Html5Audio /> elements will render muted.

Example​

MyComp.tsx
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <BlueSquare />
    </Freeze>
  );
};

API​

The Freeze component is a high order component and accepts, besides it's children, the following props:

frame​

At which frame it's children should freeze.

activev4.0.127​

Deactivate freezing component by passing false.
You may also pass a callback function and accept the current frame and return a boolean.

From frame 30 on
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30} active={(f) => f < 30}>
      <BlueSquare />
    </Freeze>
  );
};

Demo​

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​