Build a cursor-following 3D button

In this lesson, we’re going to be creating this fun button interaction that moves within 3D space and follows your cursor.

Let’s get into it. We’ll open up the Interactions panel and make sure we’re using Interactions with GSAP. Then we’re going to create a new mouse move trigger. Mouse move allows us to animate based on where the user’s cursor is positioned over an element or over the viewport.

We’re going to be animating the button, but we’re going to set the trigger to the 3D-hitbox element, the parent container of the button, which is a little bigger than the button. And we’ve put a border on it so we can see the trigger area. Setting a larger interactive area around the element you want to animate will make the button feel like it’s reacting to our cursor getting close to it, rather than just animating when the button itself is hovered.

If we look in our mouse move interaction, there are three options: Mouse X actions, Mouse Y actions, and Interval actions. We’re going to use Mouse X and Mouse Y for this animation, so let’s set up Mouse X first.

We’ll add an animate action to animate on the x-axis, and we’ll rename this action X. We don’t want the target on the hitbox, so let’s change the target to the button, the 3D-button, and make sure we’re animating the button within the trigger element.

We’ll remove the properties we don’t need and use Move X to animate from -1.5rem to 1.5rem, so our button will animate the same amount in both directions.

If we preview this on the timeline, that’s what we want. If we move our mouse over the hitbox with the timeline open, you can see that as we move our mouse from left to right, the timeline is scrubbing through and the button’s animating along the x-axis. Now, you might have noticed that when we move our mouse out of the hitbox element, the button doesn’t go back to the center. Instead, it animates over to the left.

Let’s go back and open our trigger settings to see why this is happening.

If we look at the bottom of the trigger, you’ll see that the rest state for X and Y are set to 0%. This means when we move our mouse out, the animation will return to the beginning of the animation, when the animation is at 0%. For our use case, we want the rest state to be right in the middle at a neutral position, so let’s set this up to be 50% for both X and Y, the center of the animation.

Let’s go out of our trigger settings and move our mouse over the hitbox again. Now when we leave the hitbox, the button returns to the center. Looks good, so next let’s set up an animation on the y-axis.

We’ll call this one Y, and we want to make sure we’re targeting the same element again, so the 3D-button within the 3D-hitbox. This time, we’ll use Move Y to animate the same distance as our X action, from -1.5rem to 1.5rem on the y-axis. If we scrub through on the timeline, we can see the button’s moving just as we want. And if we mouse over the hitbox area, we can see both the x- and y-axis animations working together. Hooray!

Now, although these action groups are called Mouse X actions and Mouse Y actions, we don’t just have to animate x and y. We can animate any of the surfaced properties in reaction to our mouse movement on each of these axes.

Let’s go into our X action and add a Rotate Y property. We’ll animate this between -20 and 20 degrees, so the button rotates on the y-axis.

And this looks okay, but we want this animation to exist in 3D space, so let’s add a perspective. Perspective is a CSS property that creates a sense of depth. The lower the value, the more intense the effect. The higher the value, the more subtle. There’s a From and To column here because you can actually animate perspective. Let’s have a look at that for fun. We’ll add 100 in the From column and 900 in the To column.

Let’s mouse over our hitbox again. You can see that the perspective is nice and subtle when we mouse into the right side of the hitbox, but as we move over to the left, it gets more and more pronounced until the button’s basically bursting out of the box toward us.

[Grímur] Cassie, don’t panic, but the button is literally escaping out of my screen.

[Cassie] Yeah, it’s a bit much, so let’s set both values to 900 so we get a nice, subtle animation.

We’ll do the same on our y-axis. We’ll leave this action and go back into our Y action, add a Rotate X property, and set it to rotate 20 degrees in the From column and -20 degrees in the To column.

We don’t need to define perspective again here because we’re animating the same element, and we already did that in the X action.

Let’s head over to Preview mode and check out our animation. And that looks great.

And that’s creating a 3D button interaction using the mouse move trigger in Webflow Interactions powered by GSAP.