Horizontal movement on scroll

Lesson info

Lesson info

In this project, we'll cover setting up a page scroll animation which animates elements as we scroll down the page. The end result is a continuous animation which horizontally moves (and fades) elements based on the page scroll position.

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

Text. Mountain. Text. Da Vinci called these the three components of any great design. We'll animate the text to move horizontally based on our scroll position.

Now we covered this example earlier in the Interactions course when we covered triggers and animations. But we’ll build this interaction from scratch.

Our goal (as we scroll) is to have the text Let’s Go move to the left and fade out, while at the same time, the text Outside will move to the right and fade out.

So. Let’s set up a page scroll animation. (Keep in mind, we’re demoing this on a page scroll, but we could set up the section to serve as the trigger instead.)

Alright. When we’re scrolling through the page, we want to play a scroll animation. What scroll animation? The one we’re creating and naming right now. It’s going to have two steps — two sets of actions. The first actions are going to be super boring. Because we’re simply creating keyframes that say, “hey, we’re not moving at all.” Or, “we have full opacity.” And the reason we’re having to create these (and we’re doing it on each element) is that we need a starting point. (We need to specify that our elements are supposed to start at this position and that our elements are supposed to be fully opaque.) So our page scroll animation has begun. But only sort of. We’re halfway there.

We need a second point. Let’s tell our Text Background (the Let’s Go text) that at 100%, we’ll move left — the text will move left 900 pixels. And since we want this to sort of fade out, we can add another action for opacity. (We can set the opacity to 0% so that when the page is fully scrolled down, the text will be fully-transparent.)

And if the top text is moving left 900 pixels, then we can set another move (this time on the bottom text, which says “Outside”) — we’ll set that one to move to the right 900 pixels. And to even things out, we’ll create one last action for opacity. Just like the top text, let’s set the opacity to 0%.

If we enable Live Preview? This functions perfectly on scroll. Just as expected. Now we can always select multiple points (we’re using COMMAND on the Mac or CONTROL on Windows to select multiple actions one-at-a-time). We can drag these together so the opacity effect is more obvious on scroll. (Instead of getting to 0 when the page is fully scrolled down, it’ll reach that point sooner.)

We can also affect smoothing. We can add a damping effect from our trigger controls, which will really smooth things out. As we know: the higher the percentage, the longer the lag. Sometimes a gentle smoothing here is great if we want this movement to be more obvious and less jumpy if we’re using a scroll wheel or if we’re quickly moving around the page.

Now scroll-based animations can work for other properties, too. But in this case, we’ve horizontally moved (and faded) these elements based on our page scroll position.