Construct a scroll progression indicator

A scroll progression indicator assists users in tracing their position on a page. 

In this tutorial:

1. Formulate the advancement bar
2. Establish a scroll trigger
3. Organize a scroll animation
4. Cover alteration origin

Formulate the advancement bar

1. Generate a Div block
2. Label it
3. Set the backdrop color for better visibility
4. Place it in your desired location
5. Assign it a width of 100%
6. Allocate a height (e.g., 10 pixels)
7. Secure its placement to the upper left corner of the viewport
8. Assign a sufficiently high z-index value to ensure it remains on top 

Establish a scroll trigger

From the Page trigger menu within the Interactions panel, opt for While page is scrolling

That’s all there is to it! So straightforward.

Organize a scroll animation

1. Within the On scroll menu in the Interactions panel, select Play scroll animation
2. Adjacent to Scroll Animations, click the addition symbol
3. Name it (e.g., “scroll progression”)
4. Ensure your element is chosen and click on the addition symbol at 0% and choose Scale from the list
5. Beneath Scale, modify the x-axis position to 0
6. Click the advancement bar at 100% and beneath Scale switch the x-axis position to 1

Cover alteration origin

1. In the Style panel, scroll to Effects
2. Press the Additional options icon (ellipsis) beside 2D & 3D transforms
3. Assign the Origin to the left