Note: Scroll Effect is not yet supported on the new publishing infrastructure currently available in beta. We'll update the Published Site New Infrastructure (beta) Issues page once support is ready.
Set up a scroll animation
Step 1: Switch to Scroll Preview mode
Select the box element you want to add a scroll animation to.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.
Under [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, letting you scroll through and check your animation in real time:
A banner labeled [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 through the actual content.
Elements with scroll styles applied are highlighted in green in the Layers panel on the left.
Step 2: Choose a timeline
Scroll animations use a timeline to determine what triggers the animation. 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 an element enters the viewport to when it leaves. | Use this when you want to animate individual elements. |
Scroll | Linked to the scroll position (0–100%) of the nearest scrollable parent. | Use this when you want effects based on overall page progress. |
Step 3: Set up keyframes
Keyframes are milestone points that define "where and how" an element changes as you scroll.
With scroll animations, you set the appearance (position, opacity, etc.) at each keyframe, and the animation automatically transitions between them.
Typically, you'll set two keyframes: "0% (the starting state)" and "100% (the ending state)".
Adding keyframes
You can add intermediate keyframes by clicking the [+] button between existing keyframes. Adding intermediate keyframes lets you create more complex animations 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 animation should progress from 0% to 100%."
Click the trigger icon
to open a popover where you can fine-tune the trigger type and percentage.
For example, setting it to "Entry 50%" means the animation starts when the element is halfway into the viewport.
Here are the available trigger types:
Trigger | Description | Example use |
Entry | Based on the period when the element is entering the viewport. | Use this when you want the animation to play as the element slides in from the edge of the screen. |
Exit | Based on the period when the element is leaving the viewport. | Use this when you want to animate the element as it disappears off-screen. |
Contain | Based on the period when the element is fully within the viewport. | Use this when you want the element to move slowly only while it's near the center of the screen. |
Cover | Covers the entire period from when the element starts entering to when it fully exits the viewport. | Use this when you want one continuous animation from the moment the element enters until it leaves the screen. |
Step 4: Add styles to keyframes
Use the [Add Style] button next to each keyframe to set styles for that specific point in the animation.
By combining multiple styles — like translation and opacity — you can create effects such as fading in while sliding up.
Click [Add Style] on the keyframe you want to modify.
Select the style you want to add from the list that appears.
An input field for the selected style will appear in the keyframe area.
Configure the style using the input field.
The available styles are as follows:
Style | Description | Example |
Translate | Changes the position along the X/Y axis. | Slide in from below (Y: 100px → 0) |
Rotate | Rotates the element. | Spin in on appearance (-180deg → 0) |
Scale | Enlarges or shrinks the element. | Grow from small to full size (0.5 → 1) |
Opacity | Changes the transparency. | Fade in (0 → 1) |
Filter | Applies filter effects such as blur. | A blur that gradually clears away. |
Step 5: Preview the scroll animation
As you scroll through the screen, the current scroll position is displayed as a percentage on the timeline in the right panel.
This lets you check how your animation progresses in real time.
Step 6: Exit Scroll Preview mode
You can exit Scroll Preview mode using either of the following methods:
Click the [Back] icon
(arrow icon) at the top right of the right panel.
Click the [Exit Scroll Preview Mode] button in the banner at the top of the screen.
Delete scroll styles
You can delete scroll styles on a per-style or per-keyframe basis.
Delete a style
Click the [Remove Override] icon
(arrow icon) next to the style name to delete that style.
Delete an intermediate keyframe
Click the trash icon next to the intermediate keyframe to delete it.
scroll effect effect scroll animation