An Auto layout frame changes child placement from free absolute coordinates to a flow algorithm. This is ideal for title stacks, badges, credits, icon-label pairs, and modules whose spacing should remain coherent as content changes.
Container controls
Switching from manual layout
When a frame becomes an auto-layout container, its direct children are arranged in the selected flow and a consistent order. Manual positions that conflict with the flow can be reset, including related position keyframes. The editor preserves useful visible sizes and uses them as inputs to the new layout.
Switching layout modes is a structural edit. Inspect every child and its animation afterward; an absolute-position motion track may no longer describe the intended flow behavior.
Child controls
Children can expose order, grow, shrink, self-alignment, sizing constraints, and parent-relative offsets. A child frame can remain a layout container in its own right, enabling nested responsive structures.
Layout motion
Animate layout changes can visually interpolate children in the live browser when computed rectangles change. The controls expose spring parameters:
- Stiffness controls how strongly the motion approaches its target.
- Damping reduces oscillation.
- Mass changes the apparent inertia.
This motion is a live layout-reflow transition, distinct from ordinary property keyframes. It begins when the layout target changes and has no authored composition-frame start or duration. Do not treat it as deterministic timeline motion or rely on it to appear in H.264 output; use frame-addressed property keyframes for render-timed animation.
Practical example
For a title card, place title and location text in a column frame, use a small gap, center cross-axis alignment, and symmetrical padding. Text changes then reflow without manually recalculating the stack.
See parenting and keyframed layout considerations.