Cursor follow interactions

Animations that follow your cursor can be such a fun addition to your site, and you can do them in Webflow interactions powered by GSAP using the mouse move trigger. We’ll be playing with the settings along the way and seeing what’s possible.

We're going to create two types of mouse move interactions. The first one is a classic cursor follower trail, and the second interaction is a little more involved: images pop in when you move your cursor, move with velocity, and then drop off the screen.

So let's set up the first interaction.

In our site, we have our elements set up, and we're going to build our interaction on the mouse-move-container, so this is the element we’ll be tracking our mouse movement inside. Inside our mouse move container, we have a bunch of images with the class of follow-image, which we’ll get to follow our mouse. They’re all positioned in a pile on top of each other with position: absolute. And their container has pointer-events set to none, so the cursor passes right through the images instead of hovering or selecting them.

Let’s start by selecting our mouse-move-container and creating a new mouse move interaction.

If we look at our mouse move interaction, you’ll see there’s a few different options here: mouse x actions, mouse y actions, and interval actions. For now, let’s set up mouse x.

Let’s click to add an action. We’re going to choose follow mouse. We’ll change our action target to target the div our images are in, the mouse-move-images, and we’ll make sure that’s filtered within our trigger element.

In these settings, we can choose full follow, or just choose to follow the cursor on the x or y axis. So if we choose to follow on the x only, then the element will only follow along horizontally, and if we choose y, it will follow vertically. We’ll leave this as full follow, so that we get the element following our mouse on both axis. Now if we move our mouse over this section, you can see this little pile of images follows our mouse around.

We can change the offset to position the animating element in relation to our mouse cursor. If we choose the top left position, you can see that our cursor is up at the top left corner of our images. We’ll keep it set to center for this interaction. I like the images sitting right underneath our cursor.

You’ll notice if we move the cursor out of the container, the mouse follow stops and the little pile of images return to the start position. And when you enter again, the images animate smoothly to the mouse. Depending on what sort of effect you’re making, you may want to adjust this behaviour. You can do this with the start and end settings. Let’s change these to snap to the mouse on enter and stay at the last position on leave.

Now if we mouse out at the top, the images stay where the cursor left, and if we mouse back in at the bottom, the images snap to that point.

Let’s go back to the default settings for this animation.

Now this is where it gets really fun. Right now we’re targeting one element, the containing div that our images are inside, but what if we target multiple elements? Let’s change our action target to “follow-image.” Again, these are the individual images that are inside of our mouse-move-images container.

Now if we move our mouse, we have a trail of images following the cursor! Each image is now following our cursor with a little stagger applied. And when we stop moving the cursor, the images catch up.

We can change the offset time to affect how spaced out the stagger is and how long it takes to complete. Let’s change that to 0.15 seconds, and now they take a little bit more time to catch up with the cursor and there's more breathing room between each of the images. We can also change which element leads the stagger with from. Right now it’s this blue sparkle, which is at the end of the list in the Navigator, but we could change it so that the light green cog at the start of the list is leading by choosing start instead.

Another fun thing is that you can layer up mouse follow actions with animate actions.

Let's go back to our action groups. We’ll add a new animate action to the mouse x and call it "spin." We'll make sure we're targeting the same image elements, the follow-image class, within the trigger element. Let’s remove the properties and add a rotate property here. And we'll set the rotation from -180 degrees to 180 degrees. This will scrub through the animation progress as we move our cursor from left to right.

Now when we move our cursor over this element on the x axis, our elements are all rotating at the same time as following the cursor.

Super cool! But this isn’t the only thing we can do with mouse move though. Let’s go down to this other section.

We’re going to select this container, the interval-container element, and head back to our Interactions panel. Let’s set up another mouse move trigger. This time, we’re going to choose interval actions.

Interval actions allow us to play an animation at specific intervals as our mouse moves over the trigger element. We’ll look at the settings in a bit, but first let’s add an animate action. Let’s choose pop in from the presets. We’re currently targeting our container here in the action target, so let’s make sure we’re targeting the images. We’ll choose interval-image, within the trigger element.

We're going to enable the To column and animate from 0% to one hundred percent opacity. And we’ll change our ease to make it pop a little more. Let’s choose elastic out, and let's make it a bit more gentle by setting the period to 0.5. We want a bouncy ball, not an elastic band.

Now if we move our cursor over the container, our elements pop into view at intervals. But what’s controlling the interval? Let’s go out to our interval actions.

If we go into its settings by clicking the gear icon, you can choose how many pixels the cursor will move before the next interval occurs. Let’s choose 200px so we have more space.

Now when we move our cursor, our images pop into being every 200px. These images are coming from the list of images in the Navigator. There are 6 images here, and they will pop into being on our canvas one by one. If more images need to appear on the canvas at one time than we have, then we will create more and loop around them. And if we ever want to change the order they appear in, we can just use the Navigator to reorder.

The cool thing about interval actions is that we can create animation sequences, not just single actions.

Let’s add another action. We’ll choose an animate action again, and we'll call this "drop out." And again, we'll make sure we're targeting the same element, the interval-image within the trigger element. This time, we’ll animate the opacity and the y position.

We’ll animate the opacity from one hundred percent to opacity 0%. And we’ll animate on the y axis from 0 to one hundred VH, so they drop off the screen at the bottom. Let’s move our mouse over the container again, and this looks great! But the ease isn’t very realistic for a falling animation: it shoots off too fast at the start. When objects fall in the real world, they start slowly and pick up speed as they get close to the ground. So over in our ease dropdown, let’s choose a sine in.

Now if we move our cursor over the element, the images pop in and they hang in the air for a bit before they fall down.

[Keegan] And now it follows Sir Isaac Newton's third law of motion: what pops in must come down.

[Cassie] I've never heard that law of motion before, but I like it.

Now if we wanted to add more space between the actions, we can do that using our timeline, just like usual. We can drag our actions around to adjust the timing of our sequence.

This is looking pretty great, but there’s one last super magical thing to show you.

Let's go back out and create another animate action. We'll call this "velocity." First, make sure it’s targeting the interval-images within the trigger element, and then we’re going to click this little lightning bolt.

Here you can animate properties that are affected by the cursor's velocity. That’s how slowly or quickly someone moves the cursor. These properties all work with velocity, but let’s use Move X and Move Y for this and set both of the values to 100px.

Now that this is set up, let’s move down to our timeline and shift this velocity animation so it starts when the images first pop in.

We’ll drag it out to change the duration so that the images pop in and drop out while the velocity is in effect.

Now if we move our cursor, the images get thrown slightly in the direction of our mouse movement. Let’s set this up to throw then a little further. If we choose 500, you can really see what I mean!

Let’s tone it down a bit and set this to 200, so it's somewhere in the middle. And now our interval images feel like they’re reacting to the momentum from the cursor.

Velocity is really fun because it’s so reactive to user input. If someone moves the cursor really slowly, they won’t see much velocity at all, but if they move their cursor really fast, the images will fly off like the cursor is pushing them across the screen.

It's worth noting that these animations are very dynamic and sometimes don't preview the best inside Webflow. So make sure to fully test your interactions in preview mode or on your staging site to see how they really perform.

Okay, we covered a lot, but here are the important things to remember:

With Mouse X and Y, you can target multiple elements to easily get a classic cursor trail effect.

And interval actions let you animate elements following your cursor with sequenced timelines, and even velocity, so you can create really customized cursor trail animations.

And that’s how to do cursor following interactions in Webflow, powered by GSAP.