Skip to main content

<TransitionSeries>

available from v4.0.26

The <TransitionSeries> component behaves the same as the <Series> component, but allows for <TransitionSeries.Transition> components to be rendered between <TransitionSeries.Sequence> components.

Each transition consists of two parts:

1
 presentation: The effect that is being used, for example fade() or wipe().
2
 timing: The duration and the progress curve, for example springTiming() or linearTiming()

This package has some presentations and timings built-in, but custom ones can be created as well.

MyComp.tsx
tsx
import {
  linearTiming,
  springTiming,
  TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={springTiming({ config: { damping: 200 } })}
        presentation={fade()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={linearTiming({ durationInFrames: 30 })}
        presentation={wipe()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="white" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
MyComp.tsx
tsx
import {
  linearTiming,
  springTiming,
  TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={springTiming({ config: { damping: 200 } })}
        presentation={fade()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        timing={linearTiming({ durationInFrames: 30 })}
        presentation={wipe()}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="white" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

<TransitionSeries>​

Inherits the from, name, className, style and layout props from <Sequence>.

The <TransitionSeries> component can only contain <TransitionSeries.Sequence> and <TransitionSeries.Transition> components.

<TransitionSeries.Sequence>​

Inherits the durationInFrames, name, className, style and layout props from <Sequence>.

As children, put the contents of your scene.

<TransitionSeries.Transition>​

Takes two props:

  • timing: A timing of type TransitionTiming. See Timings for more information.
  • presentation?: A presentation of type TransitionPresentation. If not specified, the default value is slide(). See Presentations for more information.

Must be a direct child of <TransitionSeries>.
At least one <TransitionSeries.Sequence> component must come before or after the <TransitionSeries.Transition> component.
It is not allowed for two <TransitionSeries.Transition> components to be next to each other.

See also​