Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.58
remotion-markup/cropping.mdMarkdown1 KBView on GitHub
Preferably, the cropLeft, cropRight, cropTop and cropBottom props are used to crop content.
It allows for interactively dragging the components and adapting the outlines in the canvas to the crop.
The following components support crop* props:
<Sequence> from remotion, when layout="absolute-fill"<CanvasImage> from remotion<Img> from remotion<AnimatedImage> from remotion<HtmlInCanvas> from remotion<Solid> from remotion<Video> from @remotion/media<Gif> from @remotion/gif<RemotionRiveCanvas> from @remotion/riveCrop values are ratios between 0 and 1.
A value of 0 applies no crop on that edge.
A value of 1 is a full crop.
Keep Interactivity Best Practices also for cropping, to keep it editable and keyframable.
<CanvasImage
src={staticFile("photo.png")}
cropLeft={interpolate(frame, [0, 30], [0, 0.25], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
})}
cropBottom={0.1}
/>Do not use clipPath together with crop props.