Position

The Position config gives you a variety of ways to position your layer in the frame by specifying x, y and isRelative attributes. isRelative is set to false by default, but if set to true, will treat decimal values provided to x and y as fractions of composition height and width, respectively. For example, {isRelative: true, x: 0.5} positions the layer at 50% of the composition width.

Interface

interface Position {
  position?: {
    // defaults to false
    isRelative?: boolean;


    // number of pixels from left, or auto-position
    // defaults to 0
    x?: number | "left" | "center" | "right";


    // number of pixels from top, or auto-position
    // defaults to 0
    y?: number | "top" | "center" | "bottom";
  };
}

Configuring Position

You can modify a layer's position-related settings by passing a configuration object or by calling its setters. You can read the layer's position-related settings by calling its getters

Configuration Object

const image = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      isRelative: false, // boolean
      
      // number of pixels from the left of the composition,
      // or one of "left", "center", "right"
      // or a decimal value if \`isRelative\` is set to true
      x: "left",


      // number of pixels from the top of the composition,
      // or one of "top", "center", "bottom"
      // or a decimal value if \`isRelative\` is set to true
      y: "center",
    },
  }
);

Output

Setters

const image = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png"
);


image.setIsRelative(true).setX("center").setY(0.25);

Output

Getters

image.isRelative; // -> true
image.x; // -> "left"
image.y; // -> "center"

Example

const leftTop = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "left",
      y: "top",
    },
    trim: {
      end: 0.1,
    },
  }
);


const centerTop = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "center",
      y: "top",
    },
    trim: {
      end: 0.1,
    },
  }
);


const rightTop = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "right",
      y: "top",
    },
    trim: {
      end: 0.1,
    },
  }
);


const leftCenter = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "left",
      y: "center",
    },
    trim: {
      end: 0.1,
    },
  }
);


const centerCenter = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "center",
      y: "center",
    },
    trim: {
      end: 0.1,
    },
  }
);


const rightCenter = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "right",
      y: "center",
    },
    trim: {
      end: 0.1,
    },
  }
);


const leftBottom = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "left",
      y: "bottom",
    },
    trim: {
      end: 0.1,
    },
  }
);


const centerBottom = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "center",
      y: "bottom",
    },
    trim: {
      end: 0.1,
    },
  }
);


const rightBottom = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      x: "right",
      y: "bottom",
    },
    trim: {
      end: 0.1,
    },
  }
);


const relativeRelative = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      isRelative: true,
      x: 0.25,
      y: 0.25,
    },
    trim: {
      end: 0.1,
    },
  }
);


const leftRelative = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      isRelative: true,
      x: "left",
      y: 0.25,
    },
    trim: {
      end: 0.1,
    },
  }
);


const relativeBottom = await composition.addImage(
  "https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
  {
    position: {
      isRelative: true,
      x: 0.25,
      y: "bottom",
    },
    trim: {
      end: 0.1,
    },
  }
);


await composition.addSequence([
  leftTop,
  centerTop,
  rightTop,
  leftCenter,
  centerCenter,
  rightCenter,
  leftBottom,
  centerBottom,
  rightBottom,
  relativeRelative,
  leftRelative,
  relativeBottom,
]);