eBox

Create and scale boxes from any anchor point with Expressions.

Github Repo

v1.3.0

Allow more anchor points

js
const myBox = createBox({
  size: [100, 100],
  position: [0, 0],
  anchor: "center",
});
myBox.setScale([0, 100], "center");
myBox.getPath();

The problem

When making templates in After Effects, you often need to create rectangles that have dynamic sizes and positions, like text boxes.

You can do this with rectangle shape or paths, using expressions to set their size, position and scale.

This gets complicated as you need to scale it on and off from different anchor points, with lots of nested Shape Groups or boilerplate code.

The solution

eBox solves this by providing an easy way to create box paths in expressions, where you can set the size, position and scale from any anchor point.

This allows you to create dynamic rectangle paths without any boilerplate code.

Usage

Import

Download the library .jsx file and import it into your After Effects project.

It's also a good idea to place the file in any compositions where it's used, so that After Effects will count it as used when reducing the project.

Reference the library

The library exposes a createBox function, which takes the box properties as an object parameters and returns a Box object.

js
const { createBox } = footage("eBox.jsx").sourceData;

Create a box

You then use this function to create a box object, giving it the size, position and anchor properties of your box.

The anchor is the point of the box that will be at the given position.

js
const myBox = createBox({
  size: [100, 100],
  position: div([thisComp.width, thisComp.height], 2),
  anchor: "center",
});

Scale the box

You can then scale the box using it's setScale() method, from any anchor point.

js
myBox.setScale([inScale, 100], "bottomLeft");
myBox.setScale([outScale, 100], "bottomRight");

You can call setScale multiple times to control it from different anchor points. Each one scales the result of the previous scale operation, so the anchor points are always at the box corners.

Get the paths

You then call getPath on the box object, which returns the path value to set as the result of the expression.

js
myBox.getPath();

API

Anchor

type

ts
Anchor = "topLeft" | "topRight" | "bottomRight" | "bottomLeft" | "center";

Used in createBox and setScale to set anchor points.

createBox

function

ts
createBox(boxProperties: {
    size: [number, number] = [100, 100],
    position: [number, number] = [0, 0],
    anchor: Anchor = "center"
}): Box;

Parameters

size The x and y dimensions of the box
position The position of the given anchor in comp space
anchor Which point of the box should be at the given position

setScale

function

ts
Box.setScale(scale: [number, number], anchor: Anchor): void;

Parameters

scale The x and y amounts to scale, between 0 and 100
anchor Where to scale the box from

getPath

function

ts
Box.getPath(): PathValue;

Returns the path value of the box after scaling, to be used as the result of an expression on a path property.

Checking the version

All of our libraries expose a version string you can use to check if it's up to date:

js
throw footage("lib.jsx").sourceData.version;