Chapter 667: useTransitionProgress()

Core Idea

A hook that can be used inside a child of a <TransitionSeries. Sequence> to get the progress of the transition to directly manipulate the objects inside the scene.

Key Concepts

• Example
• API
• entering
• exiting
• isInTransitionSeries
• See also

Code Examples

const A: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Always `1`
  console.log(progress.exiting); // Going from 0 to 1
  console.log(progress.isInTransitionSeries); //  `true`

  return <div>A</div>;
};

const B: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Going from 0 to 1
  console.log(progress.exiting); // Always `0`
  console.log(progress.isInTransitionSeries); //  `true`

  return <div>B</div>;
};

const C: React.FC = () => {
  const progress = useTransitionProgress();
  console.log(progress.entering); // Always `1`
  console.log(progress.exiting); // Always `0`
  console.log(progress.isInTransitionSeries); //  `false`

  return <div>C</div>;
};

const Transition: React.FC = () => {
  return (
    <>
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={40}>
          <A />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={none()}
          timing={linearTiming({ durationInFrames: 30 })}
        />
        <TransitionSeries.Sequence durationInFrames={60}>
          <B />
        </TransitionSeries.Sequence>
      </TransitionSeries>
      <C />
    </>
  );
};

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

Key Takeaways

1. Understand example when working with useTransitionProgress().
2. Understand api when working with useTransitionProgress().
3. Understand entering when working with useTransitionProgress().
4. Understand exiting when working with useTransitionProgress().
5. Understand isintransitionseries when working with useTransitionProgress().

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.