Composition Layouts

A layout provides rules on position, size, and behavior of items in a view.

Composition Layout Considerations

Remember the following when working with composition layouts:

  • Use the various layout types to automatically align content within the parameters specified.
  • Specify options such as gravity (direction), padding, and fill modes (width and height).

  • Layouts can handle a lot of concerns regarding dynamic content and sizing issues.
  • Layouts are compoundable, you can have a layout inside a layout: think of putting a vertical layout in a horizontal layout.
  • Layouts are useful for variable content, as content within layout will automatically re-flow for visual accuracy and content variability.
Layout Name Layout Behavior
No Layout AE will display the layers in the app as they are in the view port, without a Layout.
Row Layout All layers in a composition will be displayed in a row, with the first layer on the left, and the last layer on the right
Column Layout All layers in a composition will be displayed in a column, with the first layer on the top, and the last layer on the bottom
Auto Linear Layout
All layers in a composition will be displayed in a row or column depending on the size of the screen, or can be programmed to change orientation
Not supported for compositions in React Native projects; define your layout as a Row or Column Layout
Stack Layout All layers in a composition will be displayed in a stack, with the first at the front, and the last layer at the back
Grid Layout
All layers will be displayed in a grid, the number columns and rows can be specified, and gutters between grid elements can be specified
Not supported for compositions in React Native projects; typically this is used on a list, use the numColumns prop instead
Scaling Layout The engine will scale layers in a layout, based on detected changes to the composition in real time
Auto Layout
The engine will attempt to place the layers on the screen as they are laid out in the After Effects composition panel
Not supported for compositions in React Native projects; try defining your layout manually, and setting layer-specific gravity and margin
Custom Layout
A developer can apply code to the layout to create a customized layout for a specific purpose
Not supported for compositions in React Native projects; use a pre-defined layout type from this list

Screen capture of the You.i Panel in Adobe After Effects with the layouts selection opened to show layout options.

Composition and Layer Layouts

Layout properties  are available for both compositions and layers. Layout attributes can be applied through the Properties panel. Some properties are specific to certain types of layouts.

Side by side screen captures of the You.i Panel in Adobe After Effects showing the properties available composition and layer layouts.

Composition layout Layer Layout
Layout properties at the composition level apply to all layers in that composition. For example, a Gravity setting of Top-Left applies to all layers. You can define layout properties at the layer level to override default composition settings; for example, with the Gravity setting. This is good practice for setting backgrounds and creating unique elements. This behavior is similar to cascading style sheets with global styles that are locally overridden.

Common Composition Layout Properties

Screen capture of the You.i Panel in Adobe After Effects showing the properties available for a composition layout

Property Name Property Behavior
Layout Selects the type of layout from one of: Row Layout, Column Layout, Auto Linear Layout, Stack Layout, Grid Layout, Scaling Layout, Auto Layout, or Custom Layout
Gravity Selects how objects are aligned in the composition
Width and height resizing Resizes the composition to fit its content
Padding
Sets the padding distance in pixels from the top, bottom, right, and left edge of the composition.
Not supported for lists in React Native projects; apply padding to lists via JSX.
Spacing Sets the distance between the layers in the composition, and whether all layers have equal distance between them
Animation Sets the type of animation easing and the duration of the layout’s movement and scale. Default units are milliseconds, but other units can be used (‘s’, ‘min’, and ‘h’)

Common Layer Layout Properties

Screen capture of the You.i Panel in Adobe After Effects showing the properties available for a layer layout

Property Name Property Behavior
Layoutable Allows or disallows layout to affect the currently selected layer
Background Treats this layer as a background. This layer is no longer considered part of the layout and resizes to fill its parent
Aspect ratio Maintains the aspect ratio of this layer if it is resized (for example by the ‘fill parent’ or ‘fit content’ layout attributes
Gravity ‘Use Composition Gravity’ is the default value
Width/Height Set preferred width, minimum width, maximum width, and Fill Parent (expand to fill the parent container)
Margin
Set the margin for the top, right, bottom, and left of the layer. This amount is added to the spacing specified for the parent composition unless the layout is disallowed on the currently selected layer.
Not supported for list items in React Native projects; set margin to list items via JSX.

Additional properties may exist for specific layout types.