Parallax Panel

• Parallax Panel
  • Module Parallax Settings
  • On Scroll Section
  • On Mouse Move Section
  • Bind to Slide BG 3D Section
  • Scroll Based Timeline Section

Parallax Panel

The Parallax panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon ¹ to enter Design Mode. Then click the Parallax tab icon ² to open the Parallax panel.

Through the Parallax panel you make a layer move in response to the visitor rather than to a timeline. A layer can drift as the page is scrolled, follow the pointer around the module, and have its scale, rotation and filters driven by scroll position. This is separate from the layer's animations, which run on their own schedule.

Every section here depends on a matching setting at module level, in the Scroll & Parallax panel of the Settings Sidebar. Scroll and mouse parallax have to be switched on for the module before anything set here takes effect, and two of the sections do not appear at all until their module level setting is enabled. The Module Parallax Settings button at the foot of the panel opens that panel directly.

The panel is identical for every layer type, including the Slide Background.

Module Parallax Settings (Button)

Open the module's Scroll & Parallax panel, where parallax is switched on for the module as a whole. Nothing set in this panel takes effect until the matching interactivity is enabled there.

On Scroll Section (Toggle)

In the On Scroll section move the layer as the visitor scrolls, and optionally drive its scale, rotation and filters from the scroll position at the same time.

If the module's scroll parallax is switched off, a warning icon appears beside this section's heading. The settings stay available and keep their values, but they do nothing on the published page until scroll parallax is enabled for the module.

On Scroll (Toggle)

Turn scroll driven movement for this layer on and off.

Delay (Number, milliseconds, range)

Set how far the layer lags behind the scroll position. Higher values make the layer trail the scroll rather than tracking it exactly, which is what gives the movement a sense of weight.

Options:

• _0ms: Minimum. The layer tracks the scroll position with no lag.
• _100000ms: Maximum. The longest available lag.

Easing (Dropdown)

Set the easing curve applied to the scroll movement, which shapes how the layer accelerates away and settles into place rather than moving at a constant rate.

Options:

• _Back.easeIn
• _Back.easeOut
• _{Back.easeInOut}
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _{Elastic.easeIn}
• _{Elastic.easeOut}
• _{Elastic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Linear
• _{Power0.easeIn}
• _{Power0.easeOut}
• _{Power0.easeInOut}
• _{Power1.easeIn}
• _{Power1.easeOut}
• _{Power1.easeInOut}
• _{Power2.easeIn}
• _{Power2.easeOut}
• _{Power2.easeInOut}
• _{Power3.easeIn}
• _{Power3.easeOut}
• _{Power3.easeInOut}
• _{Power4.easeIn}
• _{Power4.easeOut}
• _{Power4.easeInOut}
• _{QIcons.easeIn}
• _{QIcons.easeOut}
• _{QIcons.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _{Strong.easeIn}
• _{Strong.easeOut}
• _{Strong.easeInOut}
• _Late
• _Late2
• _Late3

X (Number, pixels, range)

Set how far the layer travels horizontally across the scroll range. Negative values move it left and positive values move it right.

Options:

• _-500px: Minimum. The furthest travel to the left.
• _500px: Maximum. The furthest travel to the right.

Y (Number, pixels, range)

Set how far the layer travels vertically across the scroll range. Negative values move it up and positive values move it down. This is the axis most parallax effects use, since it works with the direction the visitor is already scrolling.

Options:

• _-500px: Minimum. The furthest travel upwards.
• _500px: Maximum. The furthest travel downwards.

Under Mask Animation (Toggle)

Move the layer beneath its mask, so the mask holds its position while the layer travels inside it.

Advanced Transforms (Toggle)

Reveal the scale and rotation settings, so scrolling can resize and turn the layer as well as move it.

Scale (Number, range)

Set the size the layer reaches across the scroll range, where 1 is its normal size. Values above 1 grow the layer as the visitor scrolls and values below 1 shrink it.

Options:

• ₀: Minimum. The layer shrinks away to nothing.
• ₁₀: Maximum. The layer grows to ten times its normal size.

Rotate X (Number, degrees, range)

Set how far the layer rotates around its horizontal axis across the scroll range, tipping the top of the layer towards or away from the viewer.

Options:

• _-5000deg: Minimum. Just under fourteen full rotations backwards.
• _500deg: Maximum. Almost one and a half rotations forwards.

Rotate Y (Number, degrees, range)

Set how far the layer rotates around its vertical axis across the scroll range, swinging its left and right edges towards or away from the viewer.

Options:

• _-5000deg: Minimum. Just under fourteen full rotations in one direction.
• _5000deg: Maximum. Just under fourteen full rotations in the other.

Rotate Z (Number, degrees, range)

Set how far the layer spins flat against the screen across the scroll range, the way a wheel turns.

Options:

• _-5000deg: Minimum. Just under fourteen full anticlockwise rotations.
• _5000deg: Maximum. Just under fourteen full clockwise rotations.

Filter Effects (Toggle)

Reveal the fade and filter settings, so scrolling can change the layer's opacity, blur, grayscale and brightness as well as its position.

Fade (Number, range)

Set the opacity the layer reaches across the scroll range, where 1 is fully opaque. Lower values fade the layer out as the visitor scrolls.

Options:

• ₀: Minimum. The layer fades away completely.
• ₁₀: Maximum. Values above 1 are accepted, though a layer cannot become more opaque than solid.

Offsets (Number, range)

Set the ratio by which every filter effect is shifted along the scroll range. This is what lets the filters run in and back out again rather than in one direction only, so a layer can start blurred, come sharp as the module scrolls into view, and blur again as it scrolls away. It applies to Fade, Blur, Grayscale and Brightness together rather than to any one of them.

Options:

• ₀: Minimum. No shift is applied and each filter runs in a single direction across the scroll range.
• ₁: Maximum. The largest shift available.

Blur (Number, range)

Set the amount of blur the layer reaches across the scroll range, measured in pixels. The layer starts sharp and blurs progressively as the visitor scrolls.

Options:

• ₀: Minimum. The layer stays sharp throughout.
• ₅₀₀: Maximum. The strongest available blur.

Grayscale (Number, percentage, range)

Set how far the layer's colour drains away across the scroll range.

Options:

• _0%: Minimum. The layer keeps its full colour throughout.
• _100%: Maximum. The layer reaches full black and white.

Brightness (Number, percentage, range)

Set the brightness the layer reaches across the scroll range, where 100% is its normal brightness. Lower values darken the layer as the visitor scrolls and higher values wash it out.

Options:

• _0%: Minimum. The layer darkens to black.
• _500%: Maximum. Five times the layer's normal brightness.

On Mouse Move Section (Toggle)

In the On Mouse Move section make the layer follow the pointer as the visitor moves it across the module, which gives a shallow sense of depth without any scrolling.

If the module's mouse parallax is switched off, a warning icon appears beside this section's heading. The settings stay available and keep their values, but they do nothing on the published page until mouse parallax is enabled for the module.

On Mouse Move (Toggle)

Turn pointer driven movement for this layer on and off.

Delay (Number, milliseconds, range)

Set how far the layer lags behind the pointer. Higher values make the layer drift after the pointer rather than tracking it directly, which reads as the layer having weight.

Options:

• _0ms: Minimum. The layer tracks the pointer with no lag.
• _100000ms: Maximum. The longest available lag.

Easing (Dropdown)

Set the easing curve applied to the pointer movement, which shapes how the layer accelerates away and settles as the pointer comes to rest.

Options:

• _Back.easeIn
• _Back.easeOut
• _{Back.easeInOut}
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _{Elastic.easeIn}
• _{Elastic.easeOut}
• _{Elastic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Linear
• _{Power0.easeIn}
• _{Power0.easeOut}
• _{Power0.easeInOut}
• _{Power1.easeIn}
• _{Power1.easeOut}
• _{Power1.easeInOut}
• _{Power2.easeIn}
• _{Power2.easeOut}
• _{Power2.easeInOut}
• _{Power3.easeIn}
• _{Power3.easeOut}
• _{Power3.easeInOut}
• _{Power4.easeIn}
• _{Power4.easeOut}
• _{Power4.easeInOut}
• _{QIcons.easeIn}
• _{QIcons.easeOut}
• _{QIcons.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _{Strong.easeIn}
• _{Strong.easeOut}
• _{Strong.easeInOut}
• _Late
• _Late2
• _Late3

X (Number, pixels, range)

Set how far the layer travels horizontally as the pointer crosses the module. Larger values make the layer appear closer to the viewer, since near objects shift more than distant ones.

Options:

• _-500px: Minimum. The furthest travel against the pointer's direction.
• _500px: Maximum. The furthest travel with the pointer's direction.

Y (Number, pixels, range)

Set how far the layer travels vertically as the pointer crosses the module. Give layers different values to build a sense of depth, with foreground layers moving more than background ones.

Options:

• _-500px: Minimum. The furthest travel against the pointer's direction.
• _500px: Maximum. The furthest travel with the pointer's direction.

Mouse Origin (Dropdown)

Set the point the pointer's position is measured from, which decides where the layer sits at rest.

Options:

• _{Module Center}: Measure from the centre of the module, so the layer sits at its resting position when the pointer is at the middle and shifts furthest at the edges.
• _{Entered Point}: Measure from wherever the pointer crossed into the module, so the layer starts at rest under the pointer whichever edge it arrived from.

Bind to Slide BG 3D Section (Toggle)

Tie the layer's movement to the slide background's 3D parallax, so it shifts along with the background rather than being driven independently. Use this to keep a layer locked to a feature of the background image as the scene moves.

Scroll Based Timeline Section (Toggle)

In the Scroll Based Timeline section drive this layer's animation timeline from the scroll position instead of from the clock, so its animation plays forwards as the visitor scrolls down and backwards as they scroll up. Use the section toggle to turn scroll driven timeline playback for this layer on and off.

Time Offset (Number, milliseconds, range)

Shift where this layer sits in the scroll driven timeline, so it starts earlier or later than the scroll position would otherwise put it. Use this to stagger several layers against the same scroll range.

Options:

• _0ms: Minimum. The layer follows the scroll position with no offset.
• _100000ms: Maximum. The largest available offset.