Rendley docs

Crop & Zoom

The Crop API masks the visible area of a media clip. Cropping is a non-destructive action and can be animated through the Property Animator.

The examples below use shape clips for clarity, the API is identical for media clips, but shapes don’t need a remote media upload to demonstrate.

setCrop

setCrop(left, top, right, bottom) cuts pixels off each side of the source. Values are in source pixels, not display pixels.

Runnable example 
// Load a sample image from Pexels and crop it into a wide cinematic slice.
const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://images.pexels.com/photos/24253539/pexels-photo-24253539/free-photo-of-a-bridge-over-a-river-with-a-city-in-the-background.jpeg?auto=compress&cs=tinysrgb&w=1600",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);

// Cut 300 source pixels off the top and 300 off the bottom.
clip.style.setCrop(0, 300, 0, 300);

const [left, top, right, bottom] = clip.style.getCrop();

setCropOffset

When a crop is active, setCropOffset(x, y) pans the visible window across the source. Positive x moves the source to the right (revealing more of the left edge).

clip.style.setCropOffset(20, -10);

setZoom

setZoom(zoomX, zoomY) scales the source inside the cropped frame. 1 is natural size; 2 zooms in 2×. The frame does not resize, this is independent of setScale.

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "rectangle",
  startTime: 0,
  duration: 4,
  style: { fillColor: "#6d6ff2", width: 900, height: 500 },
});
clip.style.setPosition(960, 540);

// Animate a slow zoom over four seconds.
clip.propertyAnimator.addKeyframe("zoomX", 0, 1);
clip.propertyAnimator.addKeyframe("zoomX", 4, 1.4);
clip.propertyAnimator.addKeyframe("zoomY", 0, 1);
clip.propertyAnimator.addKeyframe("zoomY", 4, 1.4);

Use zoom for proportional zoom on both axes, or scale when you want to resize the clip on the canvas (not the source inside it).

Animatable Crop Properties

The following properties are animatable through both animation systems:

  • cropLeft: cropTop, cropRight, cropBottom
  • cropOffsetX: cropOffsetY
  • zoomX: zoomY
  • localPositionX: localPositionY (position of the media inside the crop window)

Read-only animation inputs are also available: rawWidth, rawHeight, uncropWidth, uncropHeight, uncropRawWidth, uncropRawHeight, width, height. Useful when building expressions that need the original dimensions.

See Also