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

For specific instructions on creating the following effects, please refer to each help article.

How to set up a scroll effect

Step 1. Switch to Scroll Preview Mode

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

In Scroll Preview Mode, the screen changes as follows, so you can scroll and preview the effects you've set up in real time.

A [Exit Scroll Preview Mode] banner appears at the top of the screen.
The right panel switches to the scroll style settings panel.
The screen becomes scrollable, allowing you to edit while scrolling.
In the Layers panel on the left, any element with screen styles applied is highlighted in green.

Step 2. Choose a timeline

For scroll effects, you select the timeline that triggers the effect. Choose between the [View] timeline and the [Scroll] timeline depending on your needs.

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

Timeline	Description	When to use
View	Linked to the range from when the element enters the screen until it exits.	Use this when you want to apply a unique animation to an individual element.
Scroll	Linked to the scroll position (0–100%) of the nearest parent.	Use this when you want the animation to change based on the page's overall scroll progress.

Step 3. Set up keyframes

Keyframes are checkpoints that record "where and how" something changes as you scroll.

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

In most cases, you'll set two keyframes: "0%" (when the change starts) and "100%" (when the change ends).

Add a keyframe

Click the [+] button between keyframes to add an intermediate keyframe. Intermediate keyframes let you create more complex effects that change in stages.

Set a trigger on the View timeline

When using the View timeline, the trigger determines "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, setting "Entry 50%" will start the animation once the element is halfway into view.

The available triggers are as follows.

Trigger	Description	Example use case
Entry	Based on the range when the element begins to enter the screen.	Use this to start the animation as the element slides in from the edge of the screen.
Exit	Based on the range when the element begins to leave the screen.	Use this to start the animation as the element starts disappearing off-screen.
Contain	Based on the range when the element is fully within the screen.	Use this when you want a slow animation to play only while the element is near the center of the screen.
Cover	Covers the entire range from when the element starts entering until it fully exits.	Use this to apply a single, long animation that runs from when the element enters until it leaves the screen.

Step 4. Add styles to keyframes

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

By combining multiple styles like position and opacity, you can create effects such as sliding in while fading.

Click [Add Style] on the keyframe you want to change.
Select the style you want to add from the list that appears.
Input fields for the selected style will appear in the keyframe.
Enter your settings in the style fields.

The available styles are as follows.

Style	Description	Example
Move	Changes the position along the X / Y axis.	Slide in from below (Y: 100px → 0)
Rotate	Rotates the element.	Appear while rotating (-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, for example.

Step 5. Preview the scroll effect

As you scroll the screen, the current scroll position appears as a percentage on the timeline in the right panel.

This lets you check how your effect looks in real time.

Step 6. Exit Scroll Preview Mode

Use one of the following methods to exit Scroll Preview Mode.

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.