Chapter 655: pushCut()

Core Idea

A hard editorial cut energized by a short punch-in on both scenes and a brief flash at the edit point.

Key Concepts

• Example
• API
• cutProgress?
• outgoingScale?
• incomingStartScale?
• incomingEndScale?
• transformOrigin?
• flashColor?

Code Examples

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        alignItems: 'center',
        backgroundColor: color,
        color: 'white',
        fontSize: 200,
        justifyContent: 'center',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

const transitionDurationInFrames = 11;
const outgoingPunchFrames = 5;

export const PushCutTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={pushCut({
          cutProgress: outgoingPunchFrames / transitionDurationInFrames,
        })}
        timing={linearTiming({
          durationInFrames: transitionDurationInFrames,
        })}
      />
      <TransitionSeries.Sequence
        durationInFrames={60 + outgoingPunchFrames}
      >
        <AbsoluteFill from={outgoingPunchFrames}>
          <Letter color="pink">B</Letter>
        </AbsoluteFill>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

1. Understand example when working with pushCut().
2. Understand api when working with pushCut().
3. Understand cutprogress? when working with pushCut().
4. Understand outgoingscale? when working with pushCut().
5. Understand incomingstartscale? when working with pushCut().

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.