Lesson info

Lesson info

Learn how to create a sequenced animation featuring multiple elements during or after a page loads. We cover how to set up a timed animation based on the page load trigger, and how to configure actions on each element to achieve sequences which feature consecutive, simultaneous, or even overlapping effects.

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 design which animates on load, realizing now that we should have put a spoiler tag on the lesson title.

We're going to cover page load interactions — and we'll do it in three steps: (1) we'll set up the page load trigger, (2) we'll build our animation, and (3) we'll ask Dale to repeatedly test the results.

Let's do the trigger. And this one's straightforward. In the Interactions panel, we'll add a trigger right to our page. Of course, we'll want to choose page load. And immediately, we're presented with two options: we can animate when the page starts loading, or we can wait until the page finishes loading. Or, we can animate some elements while loading — and others once we're finished.

For now, let's go in and do an animation when the page starts loading.

And that's it. We've set up our trigger. Let's animate. We'll click to create a new timed animation. Let's give it a great name.

From here, we can animate by selecting the first element we want to animate. And we start...by adding an action. If we move, for example, and we set up a movement on our controls here, and hit play? We're essentially animating the element from its initial state to the state we just added. If we want to actually start there, we'll set this as our initial state. (We're telling that element: "this is where everything begins.")

We can also create actions to adjust other properties, like opacity. We can make a change here, and set this one as the initial state as well to— [Siri] I can't see anything. [McGuire] What? [Siri] I can't see anything. [McGuire] Okay, again, we’ll get there — let's keep animating.

We'll add another action to move (this will happen while the page is loading). And we can essentially set this one to the origin. This is the original position before we tweaked it for the initial state. And we'll add another action for opacity.

If we preview? Our animation works exactly as expected. [Siri] It's ugly. [McGuire] What's that? [Siri] It's linear. There's no easing, and .5 seconds is too quick. This whole thing feels super janky.

Good point. In fact, this gives us the opportunity to select multiple actions. Just holding shift here and clicking to select (this way changes affect both move and opacity). We can change our easing to make sure we ease out. And we'll change our duration — how long the animation lasts — to a full second. Preview our animation, and it looks much better than— [Siri, overlapping] That's much better. [McGuire] Thank you.

Now remember: this trigger — the animation we created here — is triggered by the page starting to load. So we can select another element and add some actions there as well. What we're doing here is going in and making our change, then setting that change as the initial state. Just like before, we can add multiple actions to an element — in this case, we're adding these actions just like we did before (to set the initial state).

After we've set our initial state, we can hover over to see our options: we can make a new action that occurs before that first element animates, we can make one that occurs with that first animation, or we can animate this after that animation completes. Let's do after for right now (we can always change this).

We'll go in and set the value for our action. And once we do that, we can go in and set up another action, adjusting the value here as well. Making sure it's exactly where it needs to be. If we play? The first animation, then the second animation. Which is, by the way, not a great sentence. Nor is it the best animation.

Let's select both of these actions and do what we did before. We'll go in and change our easing curve for the animation, and we'll adjust our duration. Play again? It's looking much better now.

What if we change our mind? What if we want this element to animate before the first element? Make sure these actions are selected, and we just drag...and drop. Hit play? Works perfectly. Exactly as expected.

Let's move these back to where they were. Now what if we want the animations to overlap a tiny bit? Let's see what happens when we start this with the previous action. As expected, the animation starts with the previous action (in this case, that first element animating).

What about doing an offset or a delay? Just add the delay, and we've created a staggered entrance.

Now there's no limit to what we can add to this animation. So we've skipped ahead a bit and configured other elements as well — this is the same idea — we used the same principles we covered over the last few minutes, and built out our animation to include actions affecting all these elements.

And now let's test. Go to Preview? The animation loads with the page. And it looks pretty good. But remember at the beginning of this when we talked about starting the animation when the page loads versus when the page finishes loading? Maybe you built out a complex animation and changed your mind about when it should start. Two things we can do here:

We can go back into our timed actions — back into the animation — and select our first action. We can choose to add a delay here, which essentially means this: the first element won't start animating until this long — that delay — the animation won't start until this long after the page starts loading.

The second option — the second way we can delay this — is to go back in and change our action so it's no longer occurring when the page starts loading; rather, we want the animation to occur when the page finishes loading. So that's an option as well.

Let's summarize: We can use page load as a trigger to start a timed animation. We can design that animation with multiple elements and effects and overlapping and easing, and all sorts of fun stuff, and we can try it out and see how it looks right in the Designer.