The Scroll Parallax interaction creates a smooth, immersive illusion where a selected element (like an image) appears to move slower or faster than the rest of the page content as you scroll.
Get started by finding the interaction when opening the Interactions tab and selecting the "Scroll Parallax" interaction. 🔗 Learn how to use interactions.
Setting Scroll Speed
The Scroll Parallax interaction offers both convenient preset speeds and fine-tuned control, allowing you to customize the movement.
Selecting the Preset
You can choose between two default speeds: Slow or Fast. By default, the interaction is set to Slow.
Preset | Total Movement | Visual Effect |
Slow | The element moves | The element appears to lag slightly behind the page content. |
Fast | The element moves | The element appears to move more quickly than the page content. |
Setting a Custom Speed
For a more precise or stronger effect, you can enable the custom control by pressing the slider button next to the "Scroll speed" label. This activates a slider that lets you customize the movement range between −500px and +500px.
0px: If set to 0 pixels, the element will move at the same speed as the rest of the page content, resulting in no parallax effect.
Stronger Effect: The further the value is from 0 (whether +500 or −500), the more dramatic the parallax effect will be.
Advanced Settings
The Advanced Settings control when the parallax animation plays by defining which element's scroll position triggers the effect. Reveal these settings by clicking the 'Advanced' button at the bottom of the editing panel.
Run while | How it Works | When to Use It |
The full page is in view | The parallax animation plays for the entire scroll height of the browser window. | Ideal for effects like background parallax or global header changes that need to run the moment the main page starts scrolling. |
The parent section is in view | The parallax animation plays only when the element's parent section is visible. | Use this for components that animate as they scroll through a specific section. |
The target itself is in view | The parallax animation plays only during the period when the element (the target) is visible on the screen. | Best for simple "reveal on scroll" effects or making an element appear to slow down as it enters and leaves the viewport. |