Lesson info

Lesson info

This is it: a continuous animation that's triggered by the position of your mouse as you hover over a credit card. In this example, we'll create an animation which makes the card appear to face the current mouse position. We'll cover creating the continuous trigger, animating the rotation, configuring the resting state, and even adding a highlight or glare effect to the card.

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

We’re going to go through the steps necessary to set up a rotation based on our mouse position. We’ll cover four parts of this: (1) setting up the trigger, (2) animating the rotation, (3) configuring the resting state, and (4) we’ll cover how to create the specular highlight (that soft glare we see as we rotate).

Before we do any of this, remember that in CSS, to rotate or move elements with a 3D effect, we have to set perspective. You can see that applying a simple rotational transform makes the card here look kind of odd or flattened.

If we select one of the card’s parent elements — like the column its sitting in — or the row, or even the body — if we select one of those elements, we can go down and set a children perspective. This is, of course, the perspective that will be applied to child elements when any type of 3D transform is added.

Alright. Let’s set up our trigger.

We’ll select the card, and over in Interactions, we’ll add a trigger on the element itself. What kind of trigger? A trigger based on the mouse moving over this element.

That’s the trigger. Let’s animate.

We’ll create a new animation, and we’ll call it Rotate on Mouseover. We can animate along the x-axis (0% is what happens when our mouse is at the leftmost point of the element; 100% is the rightmost point). And we can animate along the y-axis (0% is when our mouse is at the top of the element; 100% is when we’re at the bottom).

Let’s add four keyframes here. Four actions. At 0% here? We’ll affect rotation. When we’re at the leftmost point, we want to rotate the card to face our left side. So we’ll set our y-rotation to, let’s keep it subtle: minus 5 degrees. Let’s do another one for when we’re to the right. And of course, we’ll set that one to the other direction: plus 5 degrees.

If we turn on Live Preview? It works great. As we hover to the left and right of the element, the rotation is occurring in real-time.

And now we’ll add our first Y action. When we’re at the top, we want to affect rotation here. Let’s face the card up — let’s get precise with this one, too, and we can just type in 5 degrees. Same thing on the bottom — when we’re hovering over the bottom — at 100% — we’ll affect the rotation here as well.

And the rotation is behaving exactly as we expected. Let’s close out of this animation for a moment. We can always affect smoothing here — add some damping — so if we crank that all the way up to 100%, and we go back in to the animation? It’ll take longer for the rotation to catch up with the mouse position. And we can go back at any time and set that value to whatever we’d like.

Let’s talk resting state. Because what happens if we’re moving around our mouse and we leave the boundary of this card? We can set our resting state values in the trigger controls. And what this gives us...is control over which points in our mouse animation are set on the resting state. If we want our resting state to match what would happen if our mouse was on the top-left? We’d set the mouse X-position to 0%. And we’d set the mouse Y-position to 0% as well. If we go into our animation (as long as Live Preview is switched on)? We can see the card has rotated — its resting state is set — just as if our mouse was on the top-left of the card.

This doesn’t change — the resting state doesn’t modify the actual mouseover animation — or the smoothing — or the easing. We can still play with the card and the values work the same. But when we hover out, it resets. (It goes back to the resting state we specified.) Let’s go back for now and set this to what’s essentially the middle. 50% on both values. This will make it appear (in the resting state) as if we’re in the middle of the animation, where the position is essentially dead center.

That’s resting state. Finally, let’s do a highlight effect.

And to do this, we’ll just go and drag in a div block. We can create a class call it Card-highlight, or really anything we’re in the mood to name it. In this case, we’ll set some dimensions for this div block (400 pixels wide; 400 pixels high).

We’ll also set the position to absolute (and position it from the top-left). Do keep in mind: in our case the parent element (the card) is set to relative. That’s why setting the highlight to the top-left worked properly (as we know, absolute positioning looks up the hierarchy for the first parent set to anything other the auto). One more note: we set the overflow to none. That’s why the highlight we’re about to create won’t extend beyond the edge of this card.

Let’s set the background color. We want this highlight to be a solid white color. And we’ll go down and make this elliptical (in this case circular) by setting the radius to 50%. (This’ll keep things elliptical even if the dimensions change.)

Finally, we’ll go down and drop the opacity down — let’s get it all the way down to 10% so we can see through this. We can even add in a blur filter to really soften this out. But while we’re animating, let’s temporarily turn off the blur so we can see what we’re doing with more precision.

Okay. Back over in Interactions. Open up the trigger, then open up the animation we already built. At 0%, we actually want our highlight to move in the opposite direction. Why? Well, we know the card here appears to turn to our left, so a glare or a highlight, would appear move to the right. So let’s move it to the right. And we don’t have to use pixels here; we can use percentages. 100% — and we can hit enter.

Same thing down here when our mouseover position is all the way to the right. We want our highlight to move to the left. Let’s say negative 50% this time. We can always eyeball this — and it’ll change based on what our design is.

And we’ll finish it off by setting each point on our up and down actions (movement along the y-axis). When we’re at the top of the card, we’ll move down 50%. And we can create one more — negative 50%.

Let’s check this out. We’ll go over to Preview our entire page. And as expected, the rotation (as well as the highlight) function properly. And as one final touch, we can go back and affect the styling for our highlight. Under filters, we can turn that blur back on. If we go over to preview our page again? Now the rotation works, the highlight works, and the specular width (thanks to that blur) is much greater. It almost gives the card a semi-gloss — or even approaching a matte texture. And when we mouse out? When our mouse leaves the boundary? It resets to its dead center — just like we told it to.

And that...is a rotation animation based on mouse position.