Formations

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

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.