Chapter 659: wipe()

Core Idea

A presentation where the entering slide slides over the exiting slide.

Key Concepts

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

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={wipe()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

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

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.