Scroll Motion turns any element into a scroll-driven animation. As visitors scroll, the element animates from a Start State to an End State — moving, rotating, scaling, fading, or blurring in sync with scroll position. Optional cursor-based tilt and a sticky pause state add extra polish. You'll find it in the Advanced tab of any element.
How It Works
You define a Start State and an End State (and optionally a Pause / Sticky State in between). Each state has a Trigger Position — a percentage of scroll progress relative to 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.
Step 1 — Enable Scroll Motion
Select your element, open the Advanced tab, find Scroll Motion, and toggle Enable Scroll Motion on.
Step 2 — Set the Start State
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.
Step 3 — Set the End State
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 across that scroll range.
Step 4 (Optional) — Pause State Sticky
Enable Pause State Sticky to hold the element at a fixed state for part of the scroll before it continues to the End State — useful for pinning an element briefly while the page scrolls behind it.
Motion Behaviour Controls
- Easing — the interpolation curve: Linear, Ease Out, or Ease In Out.
- Sequence — the order the element moves along each axis: Simultaneous (X and Y together), X Then Y, or Y Then X.
- Smooth (Lerp) — adds fluid lag so the motion feels smooth rather than rigid.
- Depth 3D — adds a sense of three-dimensional depth to the movement.
- Mouse Move / Tilt Strength — the element tilts and parallaxes in response to the visitor's cursor.
- Wipe Reveal — reveals the element with a wipe mask effect.
Positioning
Z-index, Top, Left, and Right control the element's stacking order and offset — handy when the element is pinned in place during the motion.
State Properties (Reference)
Within each state you can animate the following properties:
- Trigger Position (%) — the scroll point (relative to the viewport) where the state applies.
- Rotate (deg), Pos X / Pos Y (px), Width, Scale, Opacity, and Blur (px).