Lesson info

Lesson info

In this lesson, we'll give the appearance of depth to multiple elements in a section by using parallax motion. Elements in the section appear to be moving at varying velocities, simulating a realistic feeling of depth, as elements which appear closer also appear to scroll more quickly.

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

As we know, a parallax effect is one where objects which are closer appear to move faster relative to objects farther away. And, by extension of the same logic, objects which are farther away appear to move more slowly.

In this project, we have a section containing several images. And our goal here is to make the images closer to us appear to move more quickly as we scroll through our section.

To do that, we're not going to select the element or elements we want to move; we'll instead select the section. Because we want our section to act as the trigger. (We want the images to move as we scroll through our section.)

So. Here we are with no interactions applied. Let's go in and create an animation (based on the section) while it's scrolling in our view. On scroll, we'll play our scroll animation. Now we can change the animation boundaries here if we'd like — this is super powerful. But for now, let's leave it so that the animation begins when the section starts entering the viewport, and ends when the element is fully invisible (once we scroll past the section).

And with that in mind, let's build our animation. And we can name it Parallax Scroll Effect. We'll start with this image — and the first step is to select it. We'll add a scroll action which affects the way this moves. So while the section is at 0% (right as it's starting to scroll into view) let's have our image start down a bit. And when the section is at 100%, let's move it up.

We can actually flip on Live Preview and see the effect as we scroll. The image appears to move at a faster rate, which gives us that parallax effect because the image also appears closer to us.

Let's do the reverse on this one in the back. We'll make sure it's selected, and we'll go in to add a scroll action here as well. This time, let's see what happens if we start by moving the element up. And we'll continue by adding another scroll action, so that down at 100%, we can move, so that the element actually moves down.

And when we test this out? When we scroll on the page? It appears that we have three planes or levels of depth here. The first level, the image to the left (which appears closer, and appears to move more quickly); the second, almost all the other images (which appear a bit farther back, and appear to move at a normal rate); and finally, the third level, the image in the back (which appears farther back, and appears to move at a much slower rate).

Let's do another one. Make our selection. We want this one to appear closer, but not as close as the image to the left. So we'll move it down to start. And we'll create our second scroll action at 100%. And our goal here, of course, is to make sure it moves up. Not as dramatically as the image to the left, but enough.

When we preview? The parallax effect is now more pronounced, and we've created what appears like another level of depth in our animation.

So. Here we are after adding scroll actions to more of these elements and tweaking our animation a bit.

The key here (as with any good parallax scrolling animation) is to make sure elements in front appear to move more quickly than elements behind. If element movement doesn't adhere to that principle, animations can often feel a bit off, or to use a surgical term, "janky." A cool way to think of it is: in parallax animation, higher z-index elements (those on top of others) should appear to move more quickly than lower z-index elements (those elements behind other elements).