Chapter 651: flip()

Core Idea

A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side.

Key Concepts

• Example
• API
• direction
• perspective?
• 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 = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={flip()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

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

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.