Chapter 75: useCurrentFrame()

Core Idea

With this hook, you can retrieve the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.

Key Concepts

• Getting the absolute frame of the timeline
• Compatibility
• See also

Code Examples

const Title = () => {
  const frame = useCurrentFrame(); // 25
  return <div>{frame}</div>;
};

const Subtitle = () => {
  const frame = useCurrentFrame(); // 15
  return <div>{frame}</div>;
};

const MyVideo = () => {
  const frame = useCurrentFrame(); // 25

  return (
    <div>
      <Title />
      <AbsoluteFill from={10}>
        <Subtitle />
      </AbsoluteFill>
    </div>
  );
};

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

Key Takeaways

1. Understand getting the absolute frame of the timeline when working with useCurrentFrame().
2. Understand compatibility when working with useCurrentFrame().
3. Understand see also when working with useCurrentFrame().

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.