# Loop, Pin and scroll behaviour

> Make a layer loop for ever, hold a section on screen while the page scrolls, keep a header fixed or sticky, and let a row scroll on its own.

Source: https://uxdeck.app/guide/loop-pin-scroll (checked against uxdeck on 16 October 2026)

Three things decide how a layer behaves on a page beyond appearing: a **Loop** that plays over and over, a **Pin** that holds it in place for a stretch of scrolling, and its **Scroll behavior**, which keeps a header fixed or sticky and lets a row of cards scroll sideways. All three are in the **Prototype** tab and play in Preview and on your published site.

## Loop

Select a layer and press **+** next to **Loop**. It starts as **Spin**. Pick a **Loop effect**:

| Loop effect | What it does |
|---|---|
| **Marquee to the left**, **to the right**, **up**, **down** | Moves the layer by half its own width or height, over and over: a ticker or a logo strip. |
| **Flipbook (one child at a time)** | Shows the layers inside one at a time, round and round: a burst of pictures, stop motion. |
| **Spin** | One full turn every 12 s. |
| **Pulse** | Grows to 106% and back. |
| **Float** | Rises 12px and back. |

Then adjust:

- **Duration** (0.05 to 600 s), **Delay** and **Easing** (named curves).
- **There and back:** plays forwards then backwards instead of starting over.
- **Starts at** and **Ends at:** the states it moves between; **Add a step** puts more in between.
- **Each child for** (Flipbook, 0.05 to 60 s): how long each layer shows.
- **Keep children upright** (when it turns): the layers inside turn the other way, so a ring of pictures orbits with every picture level.
- **Fade edges** (marquees, 0 to 2,000px): both ends of the frame that clips it fade out. You can also drag the bands on the canvas.

**Make a seamless marquee:** put two copies of the row side by side in one layer (or the column one above the other). The marquee moves it by one copy's length, so the second copy lands where the first began.

## Pin

A pin holds a layer in place while the page scrolls past it, then lets it go: a section that stays while its pictures change, a heading held while text scrolls by.

Select the layer and press **+** next to **Pin**:

- **Hold for** (600px to start, up to 100,000): how much scrolling it stays for.
- **From the top** (px): where on the screen it holds.

Layers whose **While scrolling** range is **While it is held (pinned)** play across the hold. See [While scrolling](/guide/while-scrolling) and [Formations](/guide/formations).

## Scroll behavior

Select a layer inside a frame and set its **Position**:

- **Scroll with parent** (default): it moves with the page.
- **Fixed (stay in place)**: it stays where it is on the screen while the rest scrolls under it, such as a top bar or a tab bar. It leaves auto layout.
- **Sticky (stay at top)**: it scrolls until its top reaches the top of the screen, holds there until its parent has gone by, then moves on. **Top offset** holds it that far down, under a sticky header.

## Scrolling frames

Any frame can scroll its own contents. Set **Overflow scrolling** to **Horizontal**, **Vertical** or **Horizontal and vertical**: what does not fit scrolls in Preview and on your site, such as a row of cards or a carousel. A [Scroll to](/guide/interactions) action can take people to a card inside it.

## Smooth scroll

Select a screen and turn on **Smooth scroll** under **Scrolling**: scrolling glides to a stop instead of jumping line by line.

## Catches

- **Pin is only offered for a layer placed directly in a screen** that does not use auto layout.
- **Fixed is only for a layer placed directly in a screen.** Deeper layers can be Sticky.
- **Sticky is for vertical scrolling only.**
- **A pin needs a page taller than the screen.** The panel says "Make the frame taller to see the pin hold" when there is nothing to scroll through.
- **A frame that hugs its contents never overflows,** so it cannot scroll. The panel spots this and offers **Set height to Fixed** (or width).
- **On the canvas, a scrolling frame stays clipped.** It scrolls in Preview and on your site.
- **People who ask for less motion** see no loops and no smooth scrolling.

Loops, pins and scroll behaviour are on every plan.