Skip to main content

Timing and trimming

The way timing works is standardized across these components:

from: Move an item​

from moves an item on its parent timeline. By default, its children start at frame 0 when it appears:

00:01.0030
MyComposition.tsx
import {Interactive, useCurrentFrame} from 'remotion';

const Counter = () => <div>{useCurrentFrame()}</div>;

export const MyComposition = () => (
  <Interactive.Div from={30}>
    <Counter />
  </Interactive.Div>
);

durationInFrames: Limit an item​

durationInFrames sets how long an item stays on its parent timeline, starting at from.

00:01.0030
MyComposition.tsx
import {Interactive, useCurrentFrame} from 'remotion';

const Counter = () => <div>{useCurrentFrame()}</div>;

export const MyComposition = () => (
  <Interactive.Div from={30} durationInFrames={45}>
    <Counter />
  </Interactive.Div>
);

trimBefore: Trim the beginning​

trimBefore skips the beginning of an item's content without moving it from its from position.

00:01.0030
MyComposition.tsx
import {Interactive, useCurrentFrame} from 'remotion';

const Counter = () => <div>{useCurrentFrame()}</div>;

export const MyComposition = () => (
  <Interactive.Div from={30} trimBefore={15}>
    <Counter />
  </Interactive.Div>
);

playbackRate: Change speed of an item​

playbackRate on <Interactive.Div> changes how quickly its children's frame advances.

00:01.0030
MyComposition.tsx
import {Interactive, useCurrentFrame} from 'remotion';

const Counter = () => <div>{useCurrentFrame()}</div>;

export const MyComposition = () => (
  <Interactive.Div
    from={30}
    trimBefore={15}
    playbackRate={2}
  >
    <Counter />
  </Interactive.Div>
);

trimAfter: Trim video or audio​

<Audio> and <Video> also accept trimAfter to select where playback stops in the video or audio.

At 30 composition FPS, trimBefore={45} and trimAfter={105} select the source from 1.5 to 3.5 seconds.

00:01.0030
MyComposition.tsx
import {staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyComposition = () => (
  <Video
    src={staticFile('video.mp4')}
    from={30}
    trimBefore={45}
    trimAfter={105}
    playbackRate={2}
  />
);

loop: Repeat video or audio​

loop on <Audio> and <Video> repeats the source range selected by trimBefore and trimAfter.

If trimAfter is omitted, it loops from trimBefore after the end of the source.

00:01.0030
MyComposition.tsx
import {staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyComposition = () => (
  <Video
    src={staticFile('video.mp4')}
    from={30}
    trimBefore={45}
    trimAfter={105}
    playbackRate={2}
    loop
    durationInFrames={90}
  />
);

At 30 FPS, this repeats the selected 60 source frames three times over 90 composition frames.

Order of operations​

Think of the timing props as applying to the content in this order:

  1. from, trimBefore and trimAfter defines the selected source range
  2. playbackRate stretches or compresses the selected range
  3. loop (on <Audio> and <Video>) loops the stretched range
  4. durationInFrames is applied last and defines the duration of the item in the timeline.

For an item with children, useCurrentFrame() at parent frame t is:

trimBefore + (t - from) * playbackRate

See also​