The Scrollytelling element lets you sync background transitions — images, videos, or colors — to the user's scroll position, creating a layered storytelling experience.
The element has two layers: a background layer where you add the visuals that transition on scroll, and a foreground layer where you place content like text and buttons on top. You manage each layer separately.
Add background content
The background layer is where you build your visual story. Each block represents one visual section that transitions into the next as the user scrolls.
Double-click the element (or click the Edit icon) to enter Edit Mode.
Click Add Block to create a new background section.
Select a block and insert background content or edit background styles.
Repeat for every transition you want to add.
Click Done (top right) or double-click outside the canvas to exit Edit Mode.
Add foreground content
Foreground content lives on top of the background and scrolls naturally with the page, while the background stays fixed.
Make sure you are on the Main Canvas — not inside Edit Mode.
Open the Add Menu, or insert from the top toolbar, to add content on top of the element.
Position your foreground elements where you want them to appear during the scroll.
Customize transition effects
You can set a default transition and speed for the entire element, then optionally override those settings on individual blocks.
Set the default transition
Select the Scrollytelling element on the canvas (make sure you're not in Edit Mode).
In the Properties panel, use the Transition dropdown to choose an effect that applies to all blocks by default.
Use the Default speed dropdown to set the pacing: Smooth, Slow, Medium, Fast, or Snappy.
Click the gear icon next to the Transition dropdown to adjust additional settings for the selected effect (see table below).
Customize individual blocks
Below the default settings, you'll see an overview of all your added blocks. From here, you can select a specific block and assign it a different transition or speed, allowing you to mix effects throughout your story.
Available transition types and their settings
Transition | Settings |
Horizontal scroll | Reverse, Blur, Zoom |
Fade | Mode (e.g., Fade in), Blur, Zoom |
Reveal | Direction (e.g., From right), Blur, Zoom |
Stack | Direction (e.g., Up), Blur, Zoom |
Mask | Shape (e.g., Circle), Blur, Zoom |
3D | Type (e.g., Flip horizontal) |
None | No transition is applied between blocks. |
Adjust scroll behavior
If transitions feel too fast, too slow, or aren't triggering at all, the element's Height is what controls the pacing. You can adjust it in the Style tab.
Auto Height (recommended): Each block is automatically set to 100vh (one full screen height). A five-block element becomes five screens long, giving you a clean 1:1 ratio between scrolling and transitions.
Height greater than 100vh: The background locks into the viewport and stays fixed while the user scrolls through the transitions. This is the classic scrollytelling look.
Height less than 100vh: Transitions trigger rapidly as the element moves up and out of the view.
Troubleshooting
Too fast? Increase the element height to add more scroll distance.
Too slow? Decrease the element height.
Transitions not triggering? If the height is exactly 100vh, increase it to at least 101vh to give the scroll trigger room to activate.