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–
