Chapter 641: clockWipe()

Core Idea

A presentation where the exiting slide is wiped out in a circular movement, revealing the next slide underneath it.

Key Concepts

• Example
• API
• width
• height
• outerEnterStyle?<AvailableFrom v="4.0.84"/>
• outerExitStyle?<AvailableFrom v="4.0.84"/>
• innerEnterStyle?<AvailableFrom v="4.0.84"/>
• innerExitStyle?<AvailableFrom v="4.0.84"/>

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 = () => {
  const { width, height } = useVideoConfig();

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

• What it demonstrates: Usage pattern for clockWipe() from the official docs.

Key Takeaways

1. Understand example when working with clockWipe().
2. Understand api when working with clockWipe().
3. Understand width when working with clockWipe().
4. Understand height when working with clockWipe().
5. Understand outerenterstyle?<availablefrom v="4.0.84"/> when working with clockWipe().

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.