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.
