packages/docs/docs/use-current-frame.mdx
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. To learn more about how Remotion works with time, read the page about the fundamentals.
If the component you are writing is inside a component with a from prop, useCurrentFrame() will return the frame relative to when the parent starts.
Say the timeline marker is positioned at frame 25. In the example below, useCurrentFrame() will return 25, except within the Subtitle component, where it will return 15 because it is inside an <AbsoluteFill> that starts at frame 10.
import {AbsoluteFill, useCurrentFrame} from 'remotion';
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>
);
};
Using timing props, you can compose multiple elements together and time-shift them independently without changing their animation.
In rare circumstances, you want access to the absolute frame of the timeline inside a timed component. Call useCurrentFrame() in the top-level component and pass it down as a prop.
import {AbsoluteFill, useCurrentFrame} from 'remotion';
// ---cut---
const Subtitle: React.FC<{absoluteFrame: number}> = ({absoluteFrame}) => {
console.log(useCurrentFrame()); // 15
console.log(absoluteFrame); // 25
return null;
};
const MyVideo = () => {
const frame = useCurrentFrame(); // 25
return (
<AbsoluteFill from={10}>
<Subtitle absoluteFrame={frame} />
</AbsoluteFill>
);
};