The 3D Parallax element lets you stack multiple layers that move at different speeds, creating a sense of depth and dimension. Layers shift in response to the user's mouse movement or scroll position, bringing your design to life with an immersive parallax effect.
The element works by assigning each layer its own speed — faster layers feel closer to the viewer, while slower layers appear further away. You control the content of each layer, the parallax mode, and how dramatically each layer responds.
Add layer content
Each layer in the 3D Parallax element can hold its own content — images, text, shapes, or any other element. You build your scene by placing content across multiple layers at different depths.
Double-click the element (or click the Edit layers button in the Properties panel) to enter Edit Mode.
Select a layer to add content to it — use the Add Menu or drag elements from the toolbar onto the selected layer.
Repeat for each layer to build up your parallax scene.
Click Done (top right) or double-click outside the canvas to exit Edit Mode.
Choose a parallax mode
The parallax mode determines what drives the depth effect. You can choose between two modes depending on the experience you want to create.
Select the 3D Parallax element on the canvas (make sure you're not in Edit Mode).
In the Properties panel, use the Parallax mode dropdown to choose an effect.
Mode | Description |
Mouse | Layers shift in response to the user's cursor position. Moving the mouse across the element causes layers to subtly reposition, creating a 3D-like depth effect. |
Scroll | Layers move at different rates as the user scrolls down the page, producing a classic vertical parallax effect tied to scroll position. |
Adjust layer speeds
Each layer has its own speed setting that controls how much it moves relative to the others. This is what creates the illusion of depth — layers with higher speeds feel closer, while layers with lower speeds appear further away.
Select the 3D Parallax element on the canvas.
In the Properties panel, you'll see a list of all your layers with a Speed slider next to each one.
Drag the slider to set the speed multiplier for each layer. For example:
Speed value | Behavior |
+1.5× | Layer moves significantly — feels closest to the viewer. |
+0.8× | Layer moves moderately — appears at a middle depth. |
0× | Layer stays completely still — acts as a static background. |
The preview illustration in the Properties panel gives you a visual overview of how your layers are stacked and which moves most.
Auto scale layers
The Auto scale layers toggle (enabled by default) automatically adjusts the size of each layer so that no gaps or edges become visible as layers shift during the parallax effect. This ensures a polished result without manual resizing.
If you prefer full manual control over layer sizing, you can turn this toggle off — but keep in mind that fast-moving layers may reveal edges when the user interacts.
Tips for great results
Use at least 2–3 layers to create a convincing sense of depth. A single layer won't produce a visible parallax effect.
Vary your speeds. Set one layer to 0× as a static background, give middle layers a moderate speed, and let a foreground layer move fastest for maximum depth.
Keep it subtle. Small speed differences often look more natural than extreme values. Start with the default speeds and adjust from there.
Mouse mode works great for hero sections and interactive showcases. Scroll mode is ideal for long-form pages where content reveals as the user scrolls.