Stacks are elements that can contain other elements or components. They're similar to "frames" in other design tools. There are three types of stacks in Play: vertical, horizontal, and Z stacks. Vertical and horizontal stacks work similarly to Auto Layout in Figma or Smart Layout in Sketch. You can use the Element Settings Panel to define how the stack’s children should be arranged, spaced, and aligned.

Choose if your stack will have a vertical direction, horizontal direction, or no direction. Stacks with a vertical direction place their children from top to bottom, while stacks with a horizontal direction place their children from left to right.

Stacks with no direction allow you to place all objects absolutely within the stack. This stack does not have Auto Layout, but you can still add padding & alignment.

Stacks with no direction are Z stacks in SwiftUI. Learn more about Z stacks here.

Adjust the space between a stack’s children using the Gap property. You can enter a value or use your Spacing styles.

Horizontal stacks have three vertical alignment settings: Top, Center, and Bottom. Vertical stacks have three horizontal alignment settings: Left, Center, and Right. A stack’s alignment will align the stack’s children, but those children can have their own alignment settings too.

Use the Distribution property to space a stack’s children along the axis of the stack’s direction. There are six options:

Objects distributed from the start will align at the start of the stack, the top for vertical stacks and the left for horizontal stacks. The spacing between each object is determined by the Gap setting.

Objects distributed from the center will align in the center of the stack. The spacing between each object is determined by the Gap setting.

Objects distributed from the end will align at the end of the stack, the bottom for vertical stacks and the right for horizontal stacks. The spacing between each object is determined by the Gap setting.

Objects distributed evenly will have equal spacing between each object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

Objects distributed with space around will have equal spacing around each object, which will make the space between objects double the space between the first/last object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

Objects distributed with space between will have equal spacing between each object and no spacing between the first/last object and the sides of the stack. The space is calculated using the total height of a vertical stack or the total width of a horizontal stack.

By default, scrolling is set to Auto. This means that if a container’s content is larger than its height or width, a user in Play Mode will be able to scroll the container to see its overflowing content. By tapping the Scrolling property, you can turn Auto off, which gives you more options to choose from.

With Auto off, you can allow your stack to scroll vertically or horizontally if there is overflow content. When you turn either scrolling option on, you can choose whether the scrollbar is visible or not.

Scroll effects change the appearance of a stack as a user scrolls through it. We offer default scroll effect options like Scale, Fade, Fade & Scale, Blur, Cover Flow, Cover Flow Inverted, and Pile.

You can build on these effects by adjusting different property values to create custom scroll effects.

Choose if the effect should fire when the stack item is at the focal point or when the item is in view.

Set where the animation will align within the parent stack. If the focal point is aligned left, the animation will only happen on the right; if the focal point is aligned right, the animation will only happen on the left, and if the focal point is aligned center, the animation will be mirrored on the left and right.

Set the boundary of the animation. The higher the percentage, the more gradual the animation will be, and the lower the percentage, the less gradual this animation will be.

Choose if the value should continue animating past the boundary of the Trigger Area. When Clamp Values is on, the values will finish their animation within the set Trigger Area. When Clamp Values is off, the values will continue animating past the set Trigger Area.

Choose if the To and From animations (ie. the animations leading to the focal point on both sides) should be mirror versions of each other. If this property is turned on, you'll adjust one set of animations that will mirror. If this property is turned off, you'll be able to adjust the To and From values.

Create custom animations by setting different values for the Blur, Move X, Move Y, Rotate X, Rotate Y, Rotate Z, Scale, and Opacity.

With paging enabled, each object will snap into position as you scroll through the stack. There are four options: Default, Start, Center, and End. If you want your stack to continuously scroll without snapping to any of the objects, you can select None.