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).

Note
Padding isn’t supported for lists in React Native projects. Padding for lists and margins for list items must be achieved through JSX.
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
Auto Linear 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
Grid Layout
Scaling Layout	You.i Platform will scale layers in a layout, based on detected changes to the composition in real time
Auto Layout	You.i Platform 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
Auto Layout
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
Custom Layout

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.
Padding
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.
Margin

Additional properties may exist for specific layout types.