Scroll & Parallax Panel

• Scroll & Parallax Panel
• Parallax Effect Tab
• Scroll Based Timeline Tab

Scroll & Parallax Panel

The Scroll & Parallax panel is accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and finally clicking Scroll & Parallax.

In the Scroll & Parallax panel, configure scroll and mouse parallax interactivity for the module, and set up a scroll-based animation timeline that drives layer animations as the visitor scrolls.

Parallax Effect Tab

In the Parallax Effect tab, enable scroll and mouse parallax for the module and configure the behaviour of the mouse parallax effect.

Interactivity Section

On Scroll (Toggle)

Enables parallax movement driven by the visitor’s scroll position, so that module layers move at a rate different from the page scroll.

Options:

• _On: Scroll parallax is active for this module.
• _Off: Scroll parallax is disabled for this module.

On Mouse (Toggle)

Enables parallax movement driven by the visitor’s mouse cursor position, so that module layers shift in response to where the cursor is on screen.

Options:

• _On: Mouse parallax is active for this module.
• _Off: Mouse parallax is disabled for this module.

On Carousel Drag (Toggle)

Enables parallax movement driven by the visitor dragging the carousel, so that module elements respond to the drag gesture.

Options:

• _On: Carousel drag parallax is active.
• _Off: Carousel drag parallax is disabled.

Effect on Axis (Dropdown)

Sets which axis of carousel drag movement is used to drive the parallax effect.

Options:

• _{Same as Carousel}: The parallax responds to movement on the same axis as the carousel drag direction.
• _{Oposite of Carousel}: The parallax responds to movement on the axis perpendicular to the carousel drag direction.
• _{Both Axis}: The parallax responds to movement on both axes.

Carousel Axis Multiplication (Number, range)

Sets a multiplier applied to the parallax movement along the carousel’s drag axis.

Options:

• ₀: Minimum. No parallax movement is applied along the carousel drag axis.
• ₉₉₉₉₉₉: Maximum. The highest possible multiplier is applied to parallax movement along the carousel drag axis.

Opposite Axis Multiplication (Number, range)

Sets a multiplier applied to the parallax movement along the axis perpendicular to the carousel’s drag axis.

Options:

• ₀: Minimum. No parallax movement is applied along the perpendicular axis.
• _9999999: Maximum. The highest possible multiplier is applied to parallax movement along the perpendicular axis.

3D Effect (Toggle)

Enables a 3D perspective depth effect for the mouse parallax, making elements appear to move at different depths in response to the cursor.

Options:

• _On: The 3D perspective effect is active.
• _Off: The 3D perspective effect is disabled.

Tween Speed (Number, range)

Sets the duration of the easing transition applied to 3D parallax movement, controlling how quickly the effect catches up with the cursor position.

Options:

• ₃: Minimum. The 3D parallax movement snaps nearly instantly to the cursor position.
• ₉₉₉₉₉₉: Maximum. The 3D parallax movement takes the longest possible time to ease to the cursor position.

Crop Fix (z) (Number, range)

Sets a z-axis offset applied to compensate for edge cropping that can occur when the 3D perspective effect is active.

Options:

• ₀: Minimum. No z-axis offset is applied.
• ₉₉₉₉₉₉: Maximum. The highest possible z-axis offset is applied.

3D Effect Depth (Number, range)

Sets the strength of the 3D perspective depth applied to the mouse parallax effect.

Options:

• ₀: Minimum. No depth is applied to the 3D effect.
• _9999999: Maximum. The maximum depth is applied to the 3D effect.

Disable on Mobile Devices (Toggle)

Disables all parallax interactivity on mobile devices.

Options:

• _On: Parallax effects are disabled on mobile devices.
• _Off: Parallax effects remain active on mobile devices.

Scroll Based Timeline Tab

In the Scroll Based Timeline tab, enable and configure a timeline that ties layer animations to the visitor’s scroll position rather than playing them automatically.

Active Section (Toggle)

Enables mouse scroll-based timeline progression for this module. When toggled off, the timeline progresses in the default fashion, and all section child settings are hidden.

Timeline Animation Speed (Number, range)

Sets the duration over which layer animations are interpolated as the scroll position moves through the timeline, controlling how smoothly animations transition between keyframe states.

Options:

• ₀: Minimum. No interpolation time is applied between animation states.
• ₉₉₉₉₉₉: Maximum. The longest possible interpolation time is applied between animation states.

Smooth Scroll (Toggle)

Enables an easing effect on the scroll position used to drive the timeline, so that timeline progress responds to scroll with a lag rather than updating instantly.

Options:

• _On: Scroll-driven timeline progress is eased.
• _Off: Scroll-driven timeline progress updates instantly with no easing applied.

Smoothing (Number, range)

Sets the amount of lag applied to the scroll-driven timeline progress when Smooth Scroll is active. Lower values create a weightier feeling response and higher values create a faster, more direct response.

Options:

• _0.02: Minimum. The scroll-driven timeline progress responds with a weighted feeling to scroll input.
• ₁: Maximum. The scroll-driven timeline progress responds almost instantly to scroll input.

Hold Module in View (Toggle)

Locks the module in place on screen while the scroll-driven timeline plays within the range specified by Hold From and Hold Until. The module remains fixed until the timeline moves past those positions.

When Advanced mode is selected, the module scrolls gently between the top and bottom of the page for subtle dynamic movement.

Options:

• _On: The module is held in view during timeline playback.
• _Off: The module is not held in view and scrolls normally with the page.

Hold From (Number, range)

Sets the scroll position, in milliseconds along the timeline, at which the module begins being held in place on screen.

Options:

• ₀: Minimum. The module begins being held immediately from the start of the timeline.
• ₉₉₉₉₉₉: Maximum. The module begins being held at the latest possible point in the timeline.

Hold Until (Number, range)

Sets the scroll position, in milliseconds along the timeline, at which the module stops being held in place and resumes normal scroll behaviour.

Options:

• ₀: Minimum. The module stops being held immediately, effectively disabling the hold.
• _9999999: Maximum. The module can be held in place until the furthest possible point in the timeline.

Vertical Align (Dropdown)

Sets where the module is vertically positioned on screen while it is being held in view.

Options:

• _Top: The module is pinned to the top of the viewport while held.
• _Bottom: The module is pinned to the bottom of the viewport while held.
• _Travel: The module travels vertically across the viewport during the hold period.

Traditional / Advanced (Tab Switch)

Sets the mode used for the hold-in-view behaviour.

Options:

• _Traditional: The module is held completely stationary on screen during the hold period.
• _Advanced: The module scrolls gently between the top and bottom of the page during the hold period, adding subtle dynamic movement.