Scroll effects like parallax and scroll-linked animations are set up using the Scroll option in Conditional Styles (Scroll Effect).

For step-by-step instructions on creating specific effects, check out the following help articles:

How to set up a scroll effect

Step 1: Switch to Scroll Preview Mode

Select the box element you want to apply a scroll effect to.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.
From [Conditional Styles] at the top of the panel, select [Scroll] to switch to Scroll Preview Mode.

In Scroll Preview Mode, the screen changes as follows, allowing you to scroll and preview the effects you've set up:

A banner reading [Exit Scroll Preview Mode] appears at the top of the screen.
The right panel switches to the scroll style settings panel.
The screen becomes scrollable, so you can edit while scrolling in real time.
In the Layers panel on the left, elements with scroll styles applied are highlighted in green.

Step 2: Choose a timeline

Scroll effects use a timeline to determine when the effect is triggered. Choose between the [View] timeline and the [Scroll] timeline depending on your needs.

Click the [Timeline] input field in the right panel.
From the menu, select either [View] or [Scroll].

Timeline	Description	When to use
View	Linked to the period from when the element enters the screen to when it leaves.	Use this when you want to animate individual elements.
Scroll	Linked to the scroll position (0–100%) of the nearest parent.	Use this when you want changes based on overall page progress.

Step 3: Set up keyframes

Keyframes are the specific points that define "where" and "how" an element changes as you scroll.

With scroll effects, you set the appearance (position, opacity, etc.) at each keyframe, and the transitions between them are handled automatically.

Typically, you'll set two keyframes: one at 0% (when the change begins) and one at 100% (when the change ends).

Adding keyframes

You can add intermediate keyframes by clicking the [+] button between existing keyframes. Adding intermediate keyframes lets you create more complex effects with changes at multiple points.

Setting triggers for the View timeline

When using the View timeline, you use triggers to specify at what point on the screen the 0–100% change should progress.

Click the trigger icon to open a popover where you can fine-tune the trigger type and percentage.

For example, if you set the trigger to "Entry 50%," the change will begin when the element is halfway into the screen.

Here are the available trigger types:

Trigger	Description	Example use
Entry	Based on the period when the element is entering the screen.	Use this to start the change as the element slides in from the edge of the screen.
Exit	Based on the period when the element is leaving the screen.	Use this to start the change as the element disappears off-screen.
Contain	Based on the period when the element is fully visible within the screen.	Use this to slowly animate an element only while it's near the center of the screen.
Cover	Covers the entire period from when the element starts entering to when it finishes leaving.	Use this to create one continuous change from entry to exit.

Step 4: Add styles to keyframes

Use the [Add Style] button next to each keyframe to set styles for that keyframe.

By combining multiple styles — like translate and opacity — you can create effects such as fading in while sliding into view.

Click [Add Style] on the keyframe you want to modify.
From the list that appears, select the style you want to add.
An input field for the selected style will appear in the keyframe area.
Configure the style settings in the input field.

The available styles are listed below:

Style	Description	Example
Translate	Changes the position along the X / Y axis.	Slide in from below (Y: 100px → 0)
Rotate	Rotates the element.	Spin into view (-180deg → 0)
Scale	Scales the element up or down.	Grow from small to full size (0.5 → 1)
Opacity	Changes the transparency.	Fade in (0 → 1)
Filter	Applies filter effects such as blur.	Gradually remove a blur effect, etc.

Step 5: Preview the scroll effect

When you scroll the screen, the current scroll position is displayed as a percentage on the timeline in the right panel.

This lets you check the effect you've set up in real time.

Step 6: Exit Scroll Preview Mode

You can exit Scroll Preview Mode in either of the following ways:

Click the [Back] icon (arrow icon) in the upper right of the right panel.
Click the [Exit Scroll Preview Mode] button in the banner at the top of the screen.