CORE CONCEPTS

CORE CONCEPTS

New

Intro to interactions

Intro to interactions

New

1:22

Triggers & animations

Triggers & animations

New

4:31

Interpolation, easing, & smoothing

Interpolation, easing, & smoothing

New

2:58

Quick effects

Quick effects

New

2:51

INTERACTIONS EXAMPLES

INTERACTIONS EXAMPLES

New

Horizontal movement on scroll

Horizontal movement on scroll

New

2:37

Parallax movement on scroll

Parallax movement on scroll

New

3:10

Rotation on mouseover

Rotation on mouseover

New

6:27

Rotational parallax on mouseover

Rotational parallax on mouseover

New

4:14

Scroll progress indicator

Scroll progress indicator

New

2:50

Show & hide navbar on scroll

Show & hide navbar on scroll

New

2:33

Reveal elements on scroll

Reveal elements on scroll

New

4:38

Show & hide elements on click

Show & hide elements on click

New

5:01

Reveal elements on hover

Reveal elements on hover

New

3:38

3:38

new course
CSS grid landing page tutorial (36min)

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 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–