Build a scroll progress indicator

A scroll progress indicator helps visitors track where they are on a page. 

In this lesson:

1. Design the progress bar
2. Set up a scroll trigger
3. Set up a scroll animation
4. Cover transform origin
   

Design the progress bar

1. Create a Div block
2. Name it
3. Set the background color so you can see what you’re styling
4. Position it where you’d like it
5. Give it a width of 100%
6. Give it a height (e.g., 10 pixels)
7. Fix its position to the top left of the viewport
8. Give it a high enough z-index value that it always sits on top 

Set up a scroll trigger

From the Page trigger menu in the Interactions panel, choose While page is scrolling

That’s it! So simple.

Set up a scroll animation

1. From the On scroll menu in the Interactions panel, choose Play scroll animation
2. Next to Scroll Animations click the plus sign
3. Name it (e.g., “scroll progress”)
4. Make sure your element is selected and click the plus sign at 0% and choose Scale from the dropdown
5. Under Scale, change the x-axis position to 0
6. Click the progress bar at 100% and under Scale change the x-axis position to 1
   

Cover transform origin

1. In the Style panel, scroll down to Effects
2. Click the More options icon (ellipsis) next to 2D & 3D transforms
3. Set the Origin to the left