# While scrolling > Move, fade, reveal or split a layer as the page scrolls past it, from a gentle parallax to letters that come together. Source: https://uxdeck.app/guide/while-scrolling (checked against uxdeck on 16 October 2026) **While scrolling** ties a layer's motion to the scroll position: the further the page scrolls, the further the motion goes, and scrolling back plays it backwards. It is the right choice for parallax, reveals that open as a picture comes in, words that light up as they are read, and layers that fly into place while a section is held. It plays in Preview and on your published site exactly as you set it, with nothing to install. ## Add it 1. Select a layer. 2. In the **Prototype** tab, press **+** next to **While scrolling**. A new one starts as a gentle parallax: **Parallax speed** 20%, playing **While it crosses the screen**. ## Pick a look The **Scroll effect** menu holds ready-made looks. Pick one and adjust it. - **For any layer:** Parallax only, Zoom in, Fade in, Blur to focus, Scale out while held, Reveal from a corner, Reveal from the centre, Slide sideways, Rotate. - **For text:** Light up words as read, and six **Slices** looks that cut one line of text into slices that come together: Slices come together, slide in from the side, fan into place, stretch into place, zigzag together, shift into line. - **For a layer holding two or more layers (formations):** Rise into place; Fan up from the centre; Gather from all round; Fall in, tipped back; Pop in from the edges; Swing in like doors. Change anything and the menu reads **Custom**. ## The settings - **Parallax speed** (−100 to 100%): above 0 the layer drifts slower than the page, like a background; below 0 it moves faster, like a foreground. - **Scroll range:** when the motion plays. - **While it crosses the screen:** from entering at the bottom to leaving at the top. - **While it comes in:** until it reaches the middle of the screen. - **While it leaves:** from the middle until it is gone. - **While it is held (pinned):** across the stretch a **pin** holds it in place. - **Easing:** the curve across the range (linear unless you pick one). - **At the start** and **At the end:** where the layer is, its size, turn, opacity, blur and more, at each end of the range. **Add a step** puts states in between, at a percentage of the scroll. - **Driven by:** let another layer's passage drive this one. ## Text: lines, words, letters and slices On a text layer, **Split text** moves the pieces one after another instead of the whole block: **Line by line**, **Word by word**, **Letter by letter**, or **In slices**. **Spread** (5 to 100%) sets how much each piece overlaps the next: small is one after another, large is all together. For lines, words and letters, **Slide out of its box** hides each piece in its own box until it slides in from below, above, the left or the right. For words and letters you also get: - **Order:** First to last, Last to first, From the centre out, From the edges in, At random. - **Turns about:** the point each piece turns round, from its centre to **Behind them** (letters swing round a point in depth). - **Vary each:** how differently each piece starts; letters may also come from the other side. - **Start outward from the centre:** pieces part from the middle, the further out the further they travel. **In slices** cuts one line of text into 2 to 12 slices. The words slide together inside slices that stay in place, or turn on **Move whole slices** to move the strips themselves. ## Formations On a layer holding two or more layers, **Moves** can be **Each layer inside**: every layer travels in turn, with the same Order, Turns about (without Behind them), Vary each and outward settings as text. Formations play while the layer is held, so picking one pins the layer for two screens or so if it is not pinned yet. ## Watch it on the canvas Select the frame and drag the **scroll bar** beside it: the page scrolls on the canvas and every While scrolling layer moves with it. Knots on the bar mark where each motion starts. The section shows where you are, such as "42% through"; a Pin section shows "Held 120 of 400px". Double-click the bar, or press Esc, to see the design at rest. ## Catches - **On the canvas, text looks move the whole layer, and reveals show it whole.** Light up words, Slices and the reveals play in full in Preview and on your site. - **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. - **A hold with no pin** plays while the layer crosses the screen instead. - **Slices are for one line of text.** - **Too much parallax reads as broken.** The panel suggests keeping text parallax under 30% and any parallax under 60%. - **People who ask for less motion** see every layer at rest, in its final place. While scrolling is on every plan. To ship it outside uxdeck as code, use the site or code export (Pro).