Responsive Layout

When optimizing layouts to look their best across multiple platforms, you will need to make use of dynamic positioning and scaling.

By default, design elements will stretch as their parent (screen sized) composition is deployed on a screen with a resolution different than that it was created with in After Effects. 

You can control the behaviour of scaling and positioning by making use of Responsive Layout Anchors. The anchor type determines the scaling behaviour, while the position defines the direction of scaling.

To add an anchor, first select the type of scaling you'll require. Select the corresponding You.i: Insert Anchors menu items from the Composition menu. This will create a collection of hidden null layers.

To define responsive layout behaviour, set the parent of the layer you'd like scaled to the anchor with the desired position. It helps to think of the anchor's position as the origin.

 

Anchor Name

Anchor Point Position

Description
Usage
Scaling

Top left

An anchor where the children are stretched on both X and Y when the parent is scaled.

Use only when preserving proportion is not important.

Typically reserved for solids, this anchor will scale the height and width of an asset

  • a solid background
  • a N-Patch image
Width Scaling

Top, center, bottom

Scales only width.

Typically reserved for solids, this anchor will scale the width of an asset.

  • A video player scrubber bar
Height Scaling

left, center, right

Scales only height.

Typically reserved for solids, this anchor will scale the height of an asset.

  • A background solid for a vertical navigation bar
Proportional Scaling

Top left, Top,Top Right

Left, Center, Right

Bottom Left, Bottom, Bottom Right

Scales height & width in a directly corresponding manner.
Proportional Scaling calculates the new dimensions based on the average difference between width and height.  

An asset that can scale up or down proportionately, maintaining the aspect ratio between width & height.

  • a logo that can grow/shrink while maintaining it's aspect ratio

 

Proportional Width Scaling

Top left, Top,Top Right

Left, Center, Right

Bottom Left, Bottom, Bottom Right

Same as Width Scaling except that height will scale proportionally.
Proportional Width Scaling calculates the new dimensions based on difference of width. 
Calculates the proportional scale of an asset based on difference of width between the original & resized composition.
  • A horizontal list.
Proportional Height Scaling

Top left, Top,Top Right

Left, Center, Right

Bottom Left, Bottom, Bottom Right

Same as Width Scaling except that width will scale proportionally.
Proportional Height Scaling calculates the new dimensions based on difference of height.  

Calculates the proportional scale of an asset based on difference of height between the original & resized composition.
  • A vertical list.
Non Scaling

Top left, Top,Top Right

Left, Center, Right

Bottom Left, Bottom, Bottom Right

Preserve the original size of the UI component.

Maintains the original

  • An image that maintains it's size & position, regardless of screen size or aspect ratio.
Static Margin Top left

An anchor where a single child is stretched where the margin between itself and its parent remains constant (in world unit).

Can scale a composition, while maintaining margins and positioning of internal components.

  • Player control bar, containing content with independently controlled scaling behaviours.

 

Responsive layout anchors work to a point. Extreme shifts in aspect ratios (design breakpoints) likely require alternative design strategies like separate compositions for different classes of devices i.e. one for portrait phone and a different one for landscape TV.