Page load interaction

[Cassie] In this lesson, we're going to create a page load interaction using Webflow Interactions, powered by GSAP. And if you're someone new to interactions, this is a great place to start because we're going to show how to— Grímur, are you just reloading the page over and over again?

[Grímur] Yes, it's stunning.

[Cassie] Thanks, Grímur. That's why we're doing it. Nothing engages and captures attention quite like motion. So to build it, we're going cover the basics with actions, which will get you most of what you need to start creating your own interactions. So we're going to break this up into a few parts:

We'll create the page load trigger.
We'll create our first animation using a preset action.
We'll create our own custom animation.
And we'll animate everything else while covering the visual timeline and staggering.

Before we start, quick recap. Every interaction is based on two things: triggers and actions. Triggers determine when the interaction happens, like a click or page scroll. And actions determine what the interaction does. Actions can animate, or they can even set a class or instantly change a CSS property. That's the whole idea.

For us, our goal is to create an interaction on a page load trigger. This is when someone loads the page, and it will contain several actions. So let's jump into the first part.

You can open the Interactions panel by clicking on Interactions over here on the right-hand side, or hitting H on your keyboard if you want to get fancy. In the version dropdown, make sure Interactions with GSAP is selected rather than the legacy interactions.

Now you can see here we've got a bunch of different trigger types to choose from. We're going to choose page load. Let's name it "hero page load" since it happens in our hero section.

All triggers have settings you can tweak to change their behavior. Page load is a nice simple one, so there's nothing we need to change here. The default settings are perfect. The animation we set up will play from the beginning as soon as the page loads. We can always come back to this later as we make some tweaks.

Okay, next part. Let's add an action. We can click this plus, and we can see there are a few different actions at the top here. Then underneath, we've got some animation presets. For this action, we'll start with a preset. Let's go with scale in. And while we're here, let's rename this to "pink cross" so we know which action this is for.

For this action, we first need to define a target. We're going to target the pink cross in the middle of the grid here. With it selected, we can choose element, so now it's targeting that specific element. We can click on the play button at the bottom to see our scale animation.

But the targeting system is super flexible. We can use classes to target multiple items, like all elements with a class of cross. Now they're all animating.

But you'll notice that we've got the cross in the heading here animating too. That's no good. We just want the crosses in the grid. So we can filter down our targets in the target settings. We're going to add a filter which will target elements within the hero-grid. This means we're only targeting all elements with a class of cross as long as they're in the hero-grid. Nice.

Let's take a look at a different targeting option. We could say target all grid-child elements with a blue combo class, so that's animating all of them. But then we can also target based on what's inside that element, so we can filter this to only animate if the grid-child contains an element with a class of cross. And now we're just targeting this one.

You don't need to know what all of these targeting options do, but rest assured that you'll be able to target whatever you need.

Let's go back to targeting our pink cross and take a look at the animated properties. So here we're animating from a scale of 0 to a scale of 1. From is the initial state, and to is the end state.

If we want to animate another property at the same time, we can click this plus icon here and add a rotate property. We'll add a little spin by saying animate from 360 degrees.

And we can tweak from here. Let's add a little more personality to this animation by adding a different ease. We have some common eases we can use, but we can also go to the ease visualizer for even more options. You can see here this overshoot ease actually shoots past the end value and then settles back into place. I love this sort of ease for adding some playful momentum.

When we add overshoot, you can see the animation feels faster. Some easing curves will make the motion feel faster than others, so we'll increase the duration. And there we go, nice and smooth and a little bouncy.

That's our first action. Let's create our next one. We'll hit this arrow to go back to our page load interaction. This time let's set up our own animate action.

And at any time, we can see how many actions are in our page load animation and how they're sequenced by opening the timeline view. Here, we can scrub through the progress with the animation playhead. We don't have anything on our new action, so let's set that up.

You'll see that we've got a few properties to use here. These are here because they're the most common and also the most performant, but let's remove the ones we don't want.

With this action, we want to animate this arrow out of the container to the top right. We're just using a To action here to define where it's animating to: 100% of its own width to the right and 100% of its own width upwards, so it's moving up diagonally outside its container. Let's play it, and it looks good. Now that's working, it would be cool if it came back into the box from the bottom corner, so let's duplicate this action. We can do that by right-clicking and choosing Duplicate, or just using your copy-paste shortcuts. In the timeline, we can move this over so that plays immediately after the previous arrow animation. And while we're here, we'll rename this one to "arrow out" and also rename this one to "arrow in."

For "arrow in," we want to animate the arrow back to its starting position from the bottom left. So we're going to use both the From and To. For the From, we'll set -100% for the x and 100% for the y to position the arrow out of view at the bottom left. If we play this, it's now shooting all the way through. So we need to set our To values to zero, so it ends at its original position.

We can play our whole page load interaction, and that looks good.

That's our second action. Let's add another action. This time we're going to double-click on the timeline itself, and we've got a brand new action created. Let's name this action "grid stagger."

So in this action, I'm going to target all the grid children. These are the divs taking up each cell in our grid here. We're going to do a From animation and scale them up from 0.

Now let's take a look at stagger. Staggers are super powerful. They're a great way to create sequenced animation without having to make an action for every element.

There's two different stagger options. Let's choose total time, which is the time it takes to animate all the items in. Let's set total time to 1 second. So you can see here that the first animation takes 1 second, and then it takes an additional second to complete all the other animations. Click play, and each grid-child is animating in, and the whole animation takes 2 seconds. But what about the other setting? You can also choose offset time if you want more precise control over the exact gap in between each item. 1 second is way too much here, so let's bump that down to 0.1. Nice.

Now staggers, by default, start from the first element. If we look at the Navigator here, you can see it just follows the order top to bottom, so this top element goes first. But there are a lot of options here. You can also say start from the end, or stagger in randomly.

If we choose center, you'll notice it's animating out from the center element and toward the start and end. This is because we haven't said that the items are in a grid, so it's treating them like they're in one big list, just like they are in the Navigator here.

So let's set the stagger to grid. We're going to use grid auto, which magically detects the size of our grid based on the element's positions. Now if we animate from the center, we get the animation radiating out on both the x and y axis at the same time.

Auto's also handy because if your grid layout changes on different screen sizes, the animation will adapt.

Before we finish off this animation, let's tidy up the timeline. We can drag the timeline up to give us a bit more space, zoom out with this button, and if we want our timeline to be a bit tidier, we can right-click and choose "order animations by start time."

And that's it. That's our page load interaction.

Let's take a quick look at what we did.

We started with the basics: every interaction is made up of triggers and actions. We set up our trigger, page load. We created our first action with a preset. We made our own custom action, and we covered timing and staggering.

Everything we covered here is a good start for Webflow Interactions, so keep experimenting. Try a different trigger. Target something new. Nothing here is destructive. You can always undo and try again.

But that's a page load interaction from start to finish using Webflow Interactions.