Timing and trimming

The way timing works is standardized across these components:

Interactive elements, such as <Interactive.Div>, and <AbsoluteFill>.
<Img>, <CanvasImage>, <AnimatedImage>, <Solid> and <HtmlInCanvas>.
<HtmlInCanvasMotionBlur> from @remotion/motion-blur.
<Gif>, <Lottie>, <ThreeCanvas> and <RemotionRiveCanvas>.
@remotion/shapes, @remotion/rough-notation, <MacOSCursor>.
<Audio> and <Video> from @remotion/media.
Custom components built with Interactive.withSchema() that expose these props.

`from`: Move an item

from moves an item on the 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>
);

`trimBefore`: Trim the beginning

trimBefore trims the beginning of an item.

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>
);

`durationInFrames`: Set the duration

durationInFrames selects how many frames of the child timeline are shown, starting at trimBefore. The item occupies durationInFrames / playbackRate frames in its parent timeline.

00:01.0030

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

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

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

`playbackRate`: Change speed of an item

playbackRate changes the speed of its children.

00:01.0030

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

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

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

`loop`: Repeat an item

loop repeats the range selected by trimBefore and durationInFrames until the parent ends.

00:01.0030

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

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

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

To set a finite total duration for a loop, wrap it in an outer item with durationInFrames. When loop is set, <Video>, <Audio>, <Lottie>, <Gif>, and <AnimatedImage> may omit durationInFrames. The intrinsic duration after trimBefore then defines the loop range.

Order of operations

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

from positions the item in its parent timeline.
trimBefore sets the first frame in the child timeline.
durationInFrames selects the child range.
playbackRate stretches or compresses the selected range.
loop repeats the selected range until the parent ends.

Formula

Child components calling useCurrentFrame() get:

trimBefore + (frame - from) * playbackRate

If the item loops:

trimBefore + ((frame - from) * playbackRate) % durationInFrames

from: Move an item​

trimBefore: Trim the beginning​

durationInFrames: Set the duration​

playbackRate: Change speed of an item​

loop: Repeat an item​

Order of operations​

Formula​

See also​