Chapter 657: slide()

Core Idea

A presentation where the entering slide pushes out the exiting slide.

Key Concepts

• Example
• API
• direction
• enterStyle?<AvailableFrom v="4.0.84"/>
• exitStyle?<AvailableFrom v="4.0.84"/>
• Compatibility
• See also

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 slide() from the official docs.

Key Takeaways

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

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.