Scroll Motion

Scroll Motion (PixeBuilder Pro) turns a column or an element into a scroll-driven animation. While visitors scroll through its container, the element stays pinned to the screen and animates from a Start State to an End State — moving, rotating, scaling, fading, or blurring in sync with scroll position. An optional Pause State adds a middle step, and cursor-based tilt adds extra polish. You'll find it in the Advanced tab of any column or element.

Scroll Motion is also the layer system on top of a Scroll Video background (guide coming with the next release), and the Scroll Counter element (guide coming with the next release) counts along the same scroll.

The container (the section) is the scroll track. When you enable Scroll Motion on a column or element placed directly in a container, it leaves the normal layout and moves into a full-screen frame that stays pinned to the screen while the container scrolls past. The container's height is therefore the length of the scene: a taller container means more scrolling and a slower animation.

You define a Start State and an End State (and optionally a Pause State in between). Each state has a Trigger Position — a percentage of the container's scroll progress, not of the viewport — plus a set of transform values. PixeBuilder smoothly interpolates between the states as the visitor scrolls through that range, using your chosen Easing. Where 0% and 100% fall is set by Scroll Type (see Step 2).

Select your column or element, open the Advanced tab, find Scroll Motion, and toggle Enable Scroll Motion on.

Then give its container room to scroll: select the container, open General → Height, choose Min Height and type a tall value such as 300vh (three screens). A container with a Scroll background takes its height from the video timeline instead.

Scroll Type decides how much page scroll the animation is mapped to — where the motion starts and stops relative to the section it sits in. It's one setting per element (not per device). When it has not been changed, the panel shows Default, which is Inside Wrapper.

• Inside Wrapper (default) — the motion runs only while the section fills the screen: it starts when the section's top edge reaches the top of the viewport, and finishes when its bottom edge reaches the bottom. The element therefore completes its animation before the section begins sliding away, then leaves in its end state.
• Outside Wrapper — the range is stretched by one screen at each end: it starts the moment the section's top edge enters the bottom of the viewport, and ends only once the bottom edge has left the top. Because the range now covers the section entering and leaving, the element keeps animating while the section slides away — the two move together instead of one waiting for the other.

When to use Outside Wrapper: choose it whenever the element's end state is still on screen as the section leaves — a hero that keeps scaling and blurring on its way out, a parallax plane, or a horizontal reel that should keep travelling. Pair it with an End State Trigger Position of 100% so the motion uses the full extended range.

Keep Inside Wrapper when a value must land exactly as the section finishes — for example a plate that fades to fully opaque to hand off to the next section; with Outside Wrapper it would still be semi-transparent as the section leaves. The last section on a page should also stay on Inside Wrapper, because the page stops scrolling before the extended range can reach 100%.

On the first section of a page, Outside Wrapper starts part-way: the section is already on screen when the page loads, so the first part of the range has passed (about a quarter on a 300vh section). Move the Start Trigger Position to that point, or keep the first section on Inside Wrapper.

Under Start Position, set the Trigger Position (the scroll point where motion begins, e.g. 0%) and the element's initial values: Rotate, Pos X, Pos Y, Width, Scale, Opacity, and Blur.

Opacity runs from 0 to 1: drag the slider from 0 (invisible) to 1 (fully visible); 0.5 is half. The 0–1 slider comes with the next release (PixeBuilder 1.1.6+). Older versions show a 0–100 slider; there, type a value from 0 to 1 instead of dragging.

Tip: reach full opacity sooner. Opacity is blended across the whole step, from one trigger position to the next (for example Start → Pause). Type a value above 1 and the element becomes fully visible part-way through the step, because anything above 1 shows as fully visible. For example, a card at Start 0 → Pause 2 is fully visible from the middle of its range — halfway through the hold when it is synced to a Hold row.

Leave a field empty when that property doesn't change. If a field has a value in a later state but is empty here, it starts from 0 — fine for position or blur, but enter 1 for Scale (and for Opacity) when the element should start at its normal size or fully visible.

Toggle End State on and set its Trigger Position (e.g. 90%) and target values. The element animates from the Start State to the End State between the two trigger positions and keeps the end values after that.

Enable Pause State Sticky to add a middle step. The element animates Start → Pause between the Start and Pause trigger positions (Pause defaults to 50%), then Pause → End. Use it for a three-step move in one element — for example fade in, then fade out (Opacity 0 → 1 → 0). The element is pinned for the whole scene either way; the Pause State only adds the middle step.

• Easing — the interpolation curve of each step: Linear, Ease Out, or Ease In Out.
• Sequence — the order the element moves along each axis: Simultaneous (X and Y together), X Then Y (X in the first half of the step, Y in the second), or Y Then X.
• Smooth (Lerp) — lets the element trail behind the scroll and catch up, so the motion feels fluid rather than rigid. Smaller is smoother: 0.1–0.2 gives a soft trail, an empty field uses 0.5, and 0 or any value of 1 and above follows the scroll exactly. Type the decimal — the slider starts at 1.
• Depth 3D — moves the element toward the viewer in 3D space, so it looks larger and tilts with more depth. Each 1 adds 100px of depth: an empty field uses 0.5 (about 4% larger), and 3 is about a third larger. Enter 0 to keep the element at its real size. From 12 upward the element passes the viewer and disappears.
• Mouse Move — the element shifts with the visitor's cursor, up to this many pixels at the edge of the screen.
• Tilt Strength — the element tilts toward the cursor, up to this many degrees.
• Wipe Reveal (under Start Position) — reveals the element behind a moving edge. Set Reveal (%) and Angle in each state, plus Edge Size. On a Title or Text Box the wipe paints the text instead, using Base Color, Fill Color and Edge Color.

A Scroll Motion column or element sits inside the pinned full-screen frame, so these fields place it on the screen, not in the page:

• Top, Left, Right — the offset from the top and sides of the screen. Top defaults to 0, and Left to 0 when Left and Right are both empty. Use vh for Top and % for Left / Right to keep the placement the same on every screen size. They can be set per device.
• Z-index — the stacking order when layers overlap: higher is on top. Keep buttons and links on the highest layer so nothing covers them.

These fields sit outside the Start / Pause / End states, so they don't animate — use Pos X / Pos Y for movement. They are ignored on items inside another Scroll Motion layer (see the next section).

Requires PixeBuilder Pro 1.0.8+ / PixeBuilder 1.1.6+.

You can also enable Scroll Motion on items inside a column that already has Scroll Motion. These inner items are not pinned separately — their layer is already pinned — so they stay in their place in the layout and animate there, on the same scroll progress as the layer. This makes staggered entrances easy: put three cards in one pinned column, give each card the same fade and slide, and set their Start Trigger Positions a few percent apart (for example 26.5%, 30.5% and 34.5%). The cards then appear one by one.

The rule is automatic — there is no option to set. Any Scroll Motion item inside another Scroll Motion column or element of the same container animates in place: its Top, Left and Right are ignored, while Z-index and all the states still apply.

A group or separate layers?

• A group (one pinned column with Scroll Motion items inside) — best for vertical stacks such as a heading, cards and a button. The items keep the normal column layout and spacing, stay easy to edit, and reflow on tablet and mobile.
• Separate layers (each piece its own Scroll Motion column directly in the container) — best for free placement, when each piece needs its own spot on the screen with Top / Left and its own Z-index, such as images or text scattered over different parts of a background.

Requires PixeBuilder Pro 1.0.8+ / PixeBuilder 1.1.6+.

When the container has a Scroll background (a video that plays as you scroll), Sync to Timeline ties a layer to the video's timeline instead of fixed percentages. Choose Whole scene (0–100%) or one timeline row (a Play or Hold step). While synced, the Trigger Position fields are greyed and read-only, computed from the timeline: Start = the row's start minus Lead-in, Pause = the row's end, End = the row's end plus Lead-out (4% and 3% when left empty). In the second screenshot below the layer follows Hold 2 (65.9–75%), so its triggers are 61.9%, 75% and 78%. If you edit, reorder or delete timeline rows later, synced layers follow their row; a layer whose row is deleted switches back to Manual and keeps its last percentages.

In a container without a Scroll background the menu only offers Manual. The full setup is covered in the Scroll Video guide (coming with the next release).

The editor does not behave exactly like the published page, so check your scene in three places:

• Edit mode — in a normal container the motion runs as you scroll the editor canvas, and layers sit on top of each other at their Top / Left. In a container with a Scroll background, the layers are shown one under another at full strength so you can click and edit every one, and the container has no extra scene height. Requires PixeBuilder Pro 1.0.8+ / PixeBuilder 1.1.6+.
• Labels — in a Scroll background container, each layer and each item inside it shows a label such as Scroll Motion · 27→38% (its Start and End trigger), with · synced added when it follows the timeline. A label fades while you hover or select its element, and labels are hidden in Preview. Requires PixeBuilder Pro 1.0.8+ / PixeBuilder 1.1.6+.
• Preview (the eye icon at the top right, or Cmd/Ctrl + E) — hides the editor tools and plays the real scroll behaviour, including the scene height, the video and the items inside layers. It can stutter. The editor toolbar is hidden during Preview, so pick the device (desktop, tablet or mobile) before you open it. Closing Preview returns to edit mode without saving anything.
• Front end — the most reliable check. Save, keep the live page open in another tab, and reload it after each change. Test on a real phone as well.

• Invisible layers don't take clicks. While a layer's opacity is below 0.05, the layer and everything inside it ignore clicks, so a faded-out layer never blocks a button on another layer. Requires PixeBuilder Pro 1.0.8+ / PixeBuilder 1.1.6+.
• Keep end states inside the screen. A layer that ends past the right edge can make the whole page scroll sideways. Moving off the top or left is fine.
• Don't add an entrance Animation to a Scroll Motion element or the items inside it — both control opacity and position, and they fight and flicker.

Within each state you can animate the following properties:

• Trigger Position (%) — the point in the container's scroll progress where the state applies (calculated for you when Sync to Timeline is on).
• Rotate (−360 to 360 deg).
• Pos X (px, %, vw) and Pos Y (px, %, vh) — % is a share of the screen width for X and of the screen height for Y.
• Width (px, %, vw, vh).
• Scale (0 to 15; 1 is the normal size).
• Opacity (0 to 1).
• Blur (0 to 40 px).
• Reveal (%) and Angle (deg) — when Wipe Reveal is on.

Values can be set per device: tablet inherits desktop and mobile inherits tablet until you change them. Enable Scroll Motion, Scroll Type, Sync to Timeline and the state toggles are shared by all devices.