Chapter 649: fade()

Core Idea

A simple fade animation. The incoming slide fades in over the outgoing slide, while the outgoing slide does not change.

Key Concepts

• Example
• API
• enterStyle?<AvailableFrom v="4.0.84"/>
• exitStyle?<AvailableFrom v="4.0.84"/>
• shouldFadeOutExitingScene?<AvailableFrom v="4.0.166"/>
• 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={fade()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

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

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.