A scroll progress bar is a thin bar that visually indicates how far you've scrolled through a page. As you scroll, the bar extends from the left edge to the right, giving you a quick sense of your scroll position on the page.
Point: Setting up animations and effects in Studio.Design
In Studio.Design, you can create animations, effects, and other dynamic expressions using Conditional Styles.
When you set both a default style and a conditional style on a box element, the difference between them plays as an animation. You can fine-tune the animation behavior using three settings: Easing, Duration, and Delay.
The "Scroll" option in Conditional Styles lets you create effects that move elements in response to scrolling.
Step 1: Place the bar element
First, place a box that will serve as the progress bar.
Add a box where you want the progress bar to appear.
Open the [Box] tab in the right panel and set the [Layout] as follows. If the panel is closed, open the right panel first.
Width: 100%
Height: 8px (adjust to match your design)
Margin (top/bottom): approximately 500px (this ensures enough scroll distance — adjust as needed for your actual page)
Background color: any color you like (e.g., blue #3B82F6)
Step 2: Set the transform origin to the left edge
Set the transform origin so the scale animation expands from the left edge.
With the bar element from Step 1 selected, open the [Transform] tab in the right panel.
In the [Origin] grid (a 3×3 dot grid) under [Transform], click the center-left position (left column, middle row).
This ensures the bar grows from the left edge rather than from the center.
Note: You cannot change the transform origin while in Scroll Preview mode.
Make sure to change the origin before setting up scroll styles in Conditional Styles.
Step 3: Switch to Scroll Preview mode
Set up the scroll effect using the Scroll option in Conditional Styles.
With the bar element from Step 1 selected, click [Conditional Styles] at the top of the right panel.
Select [Scroll] from the style condition list to switch to Scroll Preview mode.
The right panel switches to the scroll effect settings, and a banner reading [Exit Scroll Preview mode] appears at the top of the screen.
Step 4: Configure the timeline
In Scroll Preview mode, change the [Timeline] to [Scroll].
Here's the difference between "View" and "Scroll":
View: The animation plays while the element is visible on screen — from when it enters the viewport to when it leaves.
Scroll: The animation is tied to the overall page scroll position (0–100%).
Since a progress bar represents the overall page progress, use "Scroll."
Step 5: Set the scale at the 0% keyframe
Set the bar's length at the start of the scroll (top of the page) and the end of the scroll (bottom of the page).
With this setup, the bar's Scale X gradually changes from 0% to 100% as you scroll. Since the transform origin was set to the left edge in Step 2, the bar will grow from left to right.
At the 0% point (scroll start):
Click the [Add Style] button on the 0% row.
Select [Scale].
Set X to 0%.
At the 100% point (scroll end):
Click the [Add Style] button on the 100% row.
Select [Scale].
Leave the default Scale X at 100%.
Step 6: Exit Scroll mode and preview
Once you've finished the setup, return to normal editing mode using either of these methods:
Click the [Back] button
(arrow icon) in the right panel.Click the [Exit Scroll Preview mode] button in the banner at the top of the screen.
Step 7: Preview the animation
Finally, check how the animation looks in action.
Click the preview button in the top-right corner of the editor to open the Live Preview.
Scroll the page to confirm the bar extends smoothly from left to right.
Tips for customization
Adjusting the bar's appearance
You can customize the bar's design by changing the box's style properties.
Property | How to change |
Thickness | Change the height of the bar element. |
Color | Change the background color. |
Rounded corners | Set the border radius. |
Creating a vertical progress bar
To create a vertical progress bar, change Scale Y from 0% to 100% instead. Set the transform origin to the top-center of the origin grid so the bar grows from top to bottom.
Starting the animation partway through the page
If you want the progress bar to appear only within a specific section of the page, set the timeline to "View" instead.
With this setting, the animation starts when the bar element enters the viewport.
Scroll-linked animation animation-timeline: scroll