Blog

How to create and scale rectangles with expressions (intro to eBox)

Tim Haywood

August 7, 2020

After Effects' Rectangle shape layers are perfect for most tasks, but when making templates they fall short.

These shortcomings include:

Having multiple Position and Anchor Point values, on the:
- Rectangle path
- Shape Group
- Layer Transform properties
A mix of Composition, Layer and Surface coordinate systems.
Being unable to swap Anchor Points when scaling

One solution is to use a nested shape group for each corner, or move the anchor point and position with expressions.

A common example of these issues is when scaling on a box from the left and off from the right:

You can download the After Effects project for the examples in this post:

You can get around these issues in a variety of ways, but we've found the best way is to create a rectangular path in expressions, rather than relying on the built in Rectangle.

What is eBox

eBox is a library that solves these shortcomings, by creating rectangular paths using expressions.

Position, size and scale are all controlled within the one expression, in Composition space, from any anchor point.

It comes in the form of a .jsx file file, like eKeys and aeFunctions, that you import into your After Effects project.

Below is an example expression of creating a box and scaling it on and off.

js
// Import eBox library
const eBox = footage("eBox.jsx").sourceData;
// Create new eBox
const myBox = eBox.createBox({
  size: [800, 200],
  position: [960, 540],
  anchor: "center",
});
// Scale the box in from the left
myBox.setScale([scaleIn, 100], "topLeft");
// Scale the box off from the right
myBox.setScale([scaleOut, 100], "bottomRight");
// Return the box path
myBox.getPath();

Installation

You can download the latest version of eBox from the GitHub Releases page.

Once downloaded, all you need to do is import the file into your After Effects project like you would any other footage item.

It's recommended that you also place the eKeys.jsx file in any compositions where it is referenced. This will ensure After Effects includes the file when collecting assets or packaging into a Motion Graphics Template.

Writing the expression

Adding an expression

You first need to add an expression on a Path property in a shape layer.

the path property on an after effects shape layer

Create the reference

You then need to create a reference to the eBox.jsx file you imported, so you can use the library in your expression.

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

This eBox variable is then used to create the rectangles.

Create box

The eBox variable is an object with a function called createBox() that will return a Box object.

js
const myBox = eBox.createBox();

The function expects one paramater, that is an object of the following properties.

js
createBox({
  size: [],
  position: [],
  anchor: "topLeft" || "topRight" || "bottomLeft" || "bottomRight" || "center",
  isClosed: true,
});

size The size of the box as an array [,] in pixels
position The position of the box as an array [,] in composition space
anchor: This can be one of the string '' options shown above. This determines which corner of the box will be at the given position. Defaults to 'center'.

For example, to create a rectangle the size of the composition you would write:

js
const background = eBox.createBox({
  size: [thisComp.width, thisComp.height],
  position: [0, 0],
  anchor: "topLeft",
});

Set Scale

You can then set the scale of the Box object you created with the setScale() function.

This function expects two parameters, the scale to apply as an array, and the anchor to scale from.

js
setScale(
  (scale = []),
  (anchor =
    "topLeft" || "topRight" || "bottomLeft" || "bottomRight" || "center")
);

For example:

js
background.setScale([0, 100], "bottomLeft");

You can link the scale values to an animated Slider Control, or use eKeys to animate within the expression.

You can call setScale() multiple times from different anchor points.

Get path

To get the final value for the expression, of the scaled box, you call the getPath() function on your Box object.

This function has no parameters, and returns the final path for the box.

js
background.getPath();

Example

If you take another look at the example at the beginning of the post:

js
// Import eBox library
const eBox = footage("eBox.jsx").sourceData;
// Create new eBox
const myBox = eBox.createBox({
  size: [800, 200],
  position: [960, 540],
  anchor: "center",
});
// Scale the box in from the left
myBox.setScale([scaleIn, 100], "topLeft");
// Scale the box off from the right
myBox.setScale([scaleOut, 100], "bottomRight");
// Return the box path
myBox.getPath();

scaleIn and scaleOut would be links to animated Slider Control's.

You can see how you can use eBox to create rectangles on path properties, without any of the caveats of After Effects' Rectangle Shape Layers.

Blog