# Formations

> Hold a section on screen while the pictures inside it fly, fan or fall into place one after another as the page scrolls.

Source: https://uxdeck.app/guide/formations (checked against uxdeck on 16 October 2026)

A formation is a group of layers that come into place one after another while their section is held on screen. A grid of pictures rises from below, a row of cards fans up from the centre, tiles gather from all round. Scrolling drives it, so scrolling back takes them apart again.

It is a kind of **While scrolling** for a layer that holds other layers. Read [While scrolling](/guide/while-scrolling) for the basics; this article covers what is special to formations.

## Make one

1. Put the pictures or cards in one frame (two layers or more), placed where they should end up.
2. Select that frame, open the **Prototype** tab and press **+** next to **While scrolling**.
3. In **Scroll effect**, pick a formation look.

If the frame is not pinned yet, uxdeck pins it for two to two and a half screens, so there is scrolling to play across, and a toast says how long, for example "Gallery is pinned for 2250px and its layers come into place while held".

## The looks

| Look | What happens |
|---|---|
| **Rise into place** | Each layer rises from far below, in order, each a little differently. |
| **Fan up from the centre** | Layers rise turned, from the middle outward, and swing level. |
| **Gather from all round** | Layers come in small, faded and tilted from around the frame, centre first. |
| **Fall in, tipped back** | Layers come in from below tipped back, in a random order, and stand up. |
| **Pop in from the edges** | Layers grow and fade in, from the edges to the middle. |
| **Swing in like doors** | Layers swing in on their left edge, in order. |

## The settings

A formation sets **Moves** to **Each layer inside**: every layer travels in turn from the start state to where you placed it. **The whole layer** moves the frame as one instead.

- **Spread** (5 to 100%): how much one layer's move overlaps the next.
- **Order:** **First to last**, **Last to first**, **From the centre out**, **From the edges in** or **At random**.
- **Turns about:** the point each layer turns round: **Their centre**, **Their top**, **Their bottom**, **Their left** or **Their right**.
- **Vary each** (0 to 100%): how differently each layer begins.
- **Start outward from the centre:** each layer starts away from the centre on its own side.
- **At the start:** where each layer begins: moved, scaled, turned, tipped, faded. Tweak it and the menu reads **Custom**.

The **Scroll range** is **While it is held (pinned)**, and the **Pin** section sets how long: **Hold for** in pixels of scrolling.

## Watch it

Select the page frame and drag the **scroll bar** beside it. The Pin section says how far through the hold you are, such as "Held 600 of 2250px". See [Motion on the canvas](/guide/motion-on-canvas).

## Catches

- **A formation needs a layer holding two layers or more,** and not a text layer. Otherwise the looks are not offered.
- **A hold needs room to scroll.** If the page ends before the hold does, the section says "The screen ends Npx before the hold does"; press **Make room** to make the screen taller.
- **Pin is offered for a layer placed directly in a screen** that does not use auto layout. Without a pin, a formation plays while the frame crosses the screen instead.
- **People who ask for less motion** see every layer in its place.

Formations are on every plan.