Lesson info

Learn how to reveal child elements when you hover over the parent using a hover interaction.


Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

In this video lesson, we'll cover using a trigger element, like this link block, to affect the animation of its child elements (the heart icon and the obscene donut prices).

We'll do this in 3 steps. Building the animation used when hovering in, doing the same for hovering out, then applying it to all the different donut options.

Let's start by building the hover in animation.

We'll make the link block the trigger. In other words, with our link block selected, we'll make sure that on mouse over (when you hover over this link block), the animation is triggered. (We'll play the animation we're about to create when hovering over this link block.)

Once we go to create this new animation, we'll give it a name, and we can begin animating immediately. Let's start by grabbing our heart and moving it to the left. We're simply making an action (or a keyframe) which moves the heart to the left. We also want to make sure this is the initial state (that this is how the heart will be positioned when the page loads).

Let's do something similar for the price. With the price selected, we can set its initial state just like we set the initial state for our heart. Except we're moving it to the right.

And all we have to do after that? Is bring the heart and the price back into view. And we can do this on multiple elements at once. We're simply holding shift and selecting the second element. Then we'll right or control click to duplicate.

For that animation, we want to move each of these back to the origin. 0 pixels.

And if we press the play button right now, it works. It just happens to be boring and linear. For the easing, let's choose something that'll smooth this out. We can also reduce the duration to make the entrance a bit quicker. If we press play now? It's starting to look a lot better.

And if we go into preview mode, we can see that upon hovering in, it works exactly as we'd expect. Except it only happens once. Because we need to define what happens when we hover out.

That's hovering in. Let's do hovering out.

So. Let's close out of the animation we just built. That was the animation we built for hover...let's simply duplicate it so we can use it on hover out. And we can do that — we can duplicate it right here. Once that's done, we'll go in and configure.

Let's start by renaming it. You can name yours whatever you'd like. No judgement. And essentially, for the animation, all we're doing here is trying to move our elements back to their starting positions. So we can delete the last part of the animation we did before, because there's no reason to move anything to the origin.

And for these two, we can select both at once, and simply switch off initial state. That means they'll animate from wherever they are back to their positions that are set here (outside of the link block). We can adjust the easing like we did before, and we can adjust the duration as well.

So what does this mean? It means if we go over to preview mode, this works on hovering in — and it works on hovering out. But right now, it only works on this one element.

Let's apply it to the other donuts.

How do we get it to work on the others? First, in both animations (hover and hover out), with any of the actions (or keyframes) selected for each element, we can affect the class. This is important, because we can also set it to affect children of the trigger. That means this: when we trigger the link block by hovering over it, its children (the children of that link block) will animate.

We want to do this on both animations — that means we have to go over and do it on the other one as well. And once we do, we can close out of the animation and make sure we're triggering these animations on all our link blocks — all the donuts.

The result? We have an animation which works perfectly as we hover in and out of each link block.