Lesson info

Lesson info

We'll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin.

Open this project in Webflow

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared it in the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

In this lesson, we'll build a scroll indicator to show how far down the page we've scrolled.

We'll construct this in just four steps: (1) we'll design the progress bar, (2) we'll set up a scroll trigger on the page, (3) we'll set up the scroll animation, and (4) we'll cover our transform origin.

Let's start with the progress bar. We'll create a div block for this, though the concept works with any element. We'll set the background color on the div block so we can see what we're styling, and once we get that where we want it, let's give it a width of 100%, a height (say 10 pixels). [Siri] Ten pixels. [McGuire] And we'll fix its position to the top-left of the viewport, while setting an obscenely high z-index value. That way, when we scroll, it always appears above the other content on the page.

Now you may have noticed that we didn't give our div block a specific class name. Let's give our div block a specific class name. And we’re doing that because it’s super handy and it’ll show up when we’re animating.

That's the progress bar design. Let's set up a scroll trigger.

In the Interactions panel, we can add a page trigger that's based on movement while our page is scrolling.

That's it. Seriously. That's the scroll trigger. The rest is even better.

Let's set up the scroll animation. On scroll, we want to play a scroll animation. What scroll animation? The one we'll create right now. We'll call it Scroll Progress.

So we want to make sure our element is selected. At 0%, which is when we're at the top of the page, let's scale our div block. And since this bar is horizontal, we'll scale it along the x-axis. Zero. We want it to be zero at 0% scroll. And at 100%? When we hit the bottom of the page? We can set our scaling — the x-axis — we can set it to 1. That's full, original scale.

If we turn on live preview? It looks and functions exactly as we might expect on scroll. But you might notice, it doesn't look and function exactly as we might expect on scroll. That's because we're scaling using transform.

That leads us to our final topic: transform origin. The Dynasty of Primes was almost completely destroyed, and an Autobot named Optimus Prime was– you know what? This is the wrong script. Dale, this is not the right script. It sa– it literally says Transformers Origin Story. We want– yes, Transform Origin. Okay. Got the thumbs up from Dale.

If we want to transform — if we want the scroll progress bar to actually scale from the left, we have to set our transform origin. So we can go in and set our origin on the class itself — the class we made for our div block — and set the transform origin to the left. And...that should do it.

Let's go into Preview. And now it looks and functions exactly as we might expect on scroll. Based on our scroll position, we're scaling that fixed div block along the x-axis. Actually, this might be too good. We should exit Preview before we get too much of a good thing. Speaking of which, let's end this lesson befo–