Chapter 666: <TransitionSeries>

Core Idea

The <TransitionSeries> component behaves the same as the <Series> component, but allows for <TransitionSeries. Transition> and <TransitionSeries.

Key Concepts

• Transition example
• Overlay example<AvailableFrom v="4.0.415" />
• API
• <TransitionSeries>
• <TransitionSeries.Sequence>
• <TransitionSeries.Transition>
• <TransitionSeries.Overlay><AvailableFrom v="4.0.415" />
• Enter and exit animations

Code Examples

const Fill = ({color}: {color: string}) => <AbsoluteFill style={{backgroundColor: color}} />;


export const TransitionExample: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={springTiming({config: {damping: 200}})} presentation={fade()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={linearTiming({durationInFrames: 30})} presentation={wipe()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#2ecc71" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

• What it demonstrates: Usage pattern for <TransitionSeries> from the official docs.

Key Takeaways

1. Understand transition example when working with <TransitionSeries>.
2. Understand overlay example<availablefrom v="4.0.415" /> when working with <TransitionSeries>.
3. Understand api when working with <TransitionSeries>.
4. Understand <transitionseries> when working with <TransitionSeries>.
5. Understand <transitionseries.sequence> when working with <TransitionSeries>.

Connects To

• Audio Transitions: related page in the Transitions (@remotion/transitions) section.
• Make Html in Canvas Presentation: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.