Chapter 383: Transitions

Core Idea

The <TransitionSeries> component lets you animate between absolutely positioned scenes. Between any two sequences, you can place a <TransitionSeries.

Key Concepts

• Transitions
• Enter and exit animations
• Duration
• Getting the duration of a transition
• Overlays<AvailableFrom v="4.0.415"/>
• Presentations
• Timings
• Audio transitions

Code Examples

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

• What it demonstrates: Usage pattern for Transitions from the official docs.

Key Takeaways

1. Understand transitions when working with Transitions.
2. Understand enter and exit animations when working with Transitions.
3. Understand duration when working with Transitions.
4. Understand getting the duration of a transition when working with Transitions.
5. Understand overlays<availablefrom v="4.0.415"/> when working with Transitions.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.