Setting the file. One moment.
Subchapter 7.9
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 and . A value of applies no crop on that edge. A value of is a full crop. Keep Interactivity Best Practices also for cropping, to keep it editable and keyframable.
0101<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.