Lesson info

Lesson info

In this example, we'll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we'll also cover how to apply the same animation to other elements.

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

Here's a page. As we scroll down the page, we can see that as the top of each element is scrolled into view, an animation is triggered. They animate in and become fully-visible.

You can do this on any element. You can do this on headings. You can do this on sections.

But today, we're going to build this example. And we'll do it in three steps:

We'll create the trigger (so the animation's triggered on scroll), we'll create the animation (which we can reuse so we're not building over and over and over and–), and we'll apply that animation to the other elements. If we have time, we'll do a sentence diagram on this heading and count the verb-noun pairings.

Let's start with the trigger. And we'll click this first piece here, and go down to make sure we have the Project Link selected. (But really: all we're selecting is the element that's becoming a trigger — the element that we want triggering the animation.)

Over in Interactions, all we have to do? On the element we have selected, we'll choose our trigger: scroll into view. (We want the animation to occur when the element scrolls into view.)

Alright, that's the trigger. Let's keep moving and do the animation.

Now we can always do multiple animations here (one when the trigger is scrolled into view, and another when it's scrolled out of view), but in this case, we're going to click in and start an animation only when the element is scrolled into view.

We'll create a timed animation, we can name it something like move up...on scroll. Hit enter.

We can start by adding a move transform. We want the element to start 50 pixels down from where we see it now. So we can just type in 50 pixels and move it down the y-axis.

If we hit play now, it'll actually animate down. So, of course, we want to set this position (50 pixels down) as the initial state (where it's starting).

Keep in mind that the animation we're building is only applying to the element that's selected.

Let's do the same thing with opacity. We'll go in, and adjust the opacity. We want it to start at 0%. Same thing here: let's make sure we set this as our initial state.

Okay! So. We've set two things up for our initial state: it's going to start 50 pixels down, and it'll start at 0% opacity.

Now all we have to do is add the second half of our animation. Let's add a move, and we'll specify that we want our y-position to go back to 0 pixels (back to the origin). Hit enter. We see that position change on the canvas. We can even go in and change the easing from linear to maybe a more dramatic ease out curve. Maybe increase the duration to a full second (up from .5).

Let's add one more — this time for opacity. And we'll want to ensure this is cranked up to 100 percent. Same thing here with easing: let's choose ease out quint. And of course, let's match the duration we set a moment ago on move to a full second. Something to note here: we can hold down command or control and select multiple actions (multiple keyframes) at the same time. And we can affect things like duration and easing — without having to edit one-by-one.

And another thing: since we'll be reusing this, and since we might want to build other parts of our animation, let's make sure we're affecting all elements with this class applied (the same one we're using on our link block) — and let's also make sure that triggering (or scrolling into view) only affects the children of the trigger. This way we're not triggering random stuff on other parts of the page.

If we go in and preview our project and scroll down even a tiny bit? It functions just as we'd expect.

That's creating the animation. Now let's quickly apply that animation to the other link blocks.

Let's close out of our animation, and simply apply this to all elements with the same class. That's it. Really. Go to preview mode, let's try scrolling. And it works beautifully. Now maybe these seem to be triggering a bit soon. Or we're missing the animation because it starts when the link blocks are off the screen. We can go over and create an offset. (If we add some offset here, it means this trigger — the link block — will trigger the animation when it's scrolled up 10% from the bottom of the viewport.)

So. We set our trigger, we built the animation, then we applied that animation to other elements. That's creating an interaction between these triggers, and each of their animations which reveal the content.