Adobe XD: Hover Animations | Matt Ward | Skillshare

Adobe XD: Hover Animations

Matt Ward, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (37m)
    • 1. Hover Effects Introduction

      1:05
    • 2. Hover Effects Basics

      0:54
    • 3. Auto Animate Basics

      4:26
    • 4. Creating a Hover State (component)

      4:40
    • 5. Utilizing Layer Masks

      5:01
    • 6. Hover Effects for Text

      3:42
    • 7. Hover Effects for Images

      2:48
    • 8. Prototyping with Hover Effects

      1:37
    • 9. Copying and Pasting Hover Effects

      4:46
    • 10. Creative Hover Effects

      6:30
    • 11. Recap

      1:17

About This Class

In this class we'll be exploring some basics of hover animation effects and how to utilize Adobe XD's new update that supports hover states. 

Beginning file: https://drive.google.com/open?id=1FZKTW7fIveJOTSQEsmBkoraswzIXbEo9

End File: https://drive.google.com/open?id=1rleQGviX-FleHRa3_28VXgQ_JCwVw-ho

We'll be going over the basics of auto animate, the backbone of the hover state effect, to create this landing page effect:

b7e383f1

We'll also be exploring various ways to use hover state and implement them successfully in prototypes like below:

908bee94

How to utilize them in prototypes with overlays:

b93d6369

Transcripts

1. Hover Effects Introduction: Hey, guys. So you will be going over some you animations and Adobe X'd. They just released an update pretty recently, and that's hover animations. So what that's going to allow us to do is create a pretty high fidelity prototype, and that's what we'll be doing in this class. This is a sneak peek of what will be creating. So along the way I'll be sharing some tips and tricks of how to leverage the new hover animation effect, how you can really get a super high Fidelity prototype out of it. And one of the reasons this is so important is it's easy for us to forget about hover animation effects. You go through the process and you've done a ton of work. You got a bunch of stuff done, but that's like the last little bit that's easy to forget about. But it's actually a huge part of the user experience, and if you don't define what it is, usually they'll do it in development and may not be the best thing. Not only that, but you can also leverage the hover animations to create a new stylistic element for what you're doing. So in this class I'll also be going over the basics of hover animations, ways you can implement them and then ways you can really leverage them for both creativity but usability purposes, so let's get started. 2. Hover Effects Basics: Okay, so the first thing we can do is actually open up the file of attached for everyone that'll be are beginning animation file. And before we really get into creating these animations, I wanted to take a quick second to talk about why you would create a hover effect. And so, basically, if we look in the file and you look even here in the left hand side and components, you noticed that all these elements actually have a hover effect. So hover effects air really everywhere in the u I. So even if we zoom in on this screen and we look around and we see each elements gonna hover and basically all a hover effect does is it helps tell user that you can interact with a certain piece of you I and it seems like a pretty small thing. And for me, I know it's easy for me to forget sometimes, but it's actually super important because that's one of the biggest indicators that something is interactive. And so that's part of the reason why I'm doing mess. And Adobe X'd has made it super easy. So let's dive into that now. 3. Auto Animate Basics: So once we open this file, we have our kind of e com fashion shops set up. And we have three simple screens here, and the first thing we'll do is we'll go ahead and create a effect for this home page that will happen when the user lands on it. And so this will actually be utilizing just the auto animation effect. So what Will Dio is I just held option and shift and drug that over, and it should be the same on Windows as well. And that's gonna create a replicate our board. And so since this one's super long and scrolling, I'm actually going to change the view port window by selecting our board right here and ever to the right. You see, we have the height, and we're actually gonna make that 10 80. But before we do that, I'm gonna control Z. I'm actually gonna delete all this stuff first, and that way it won't bunch up like it just did. So we'll go 10 80 inter. Okay, And the reason I'm doing this is because our first animation is just going to animate and then drop the user onto this long scrolling page. and we don't want anybody scrolling around while the animations happening. So we'll keep that view port so no one can scroll away sill, etc. Will actually create another art board here. So I'm gonna hold all in drag, and then we'll get that, replicate our board and then zoom in. So the basic way hover animations work in the W x d is very similar to just how auto animate works. And just to give you a quick example of that, I'll share you buy just dragging this line. So I'm gonna select and I'm holding option shift. I'm actually gonna scale this down and then we'll go into clicked our board right there, go to prototype. And then I'm gonna drag this over and let's have it on tap for now at the top. Good transition, Auto enemy. And then he's out. 0.3 is fine. And then So if we quick this open and you notice we have our line right here, if we quick it, auto animates between the two art boards. So a simple explanation of auto animate is that it's just taking this element an auto animating it to the same element on another art board, and if you'll notice over here in the layer pan off, we go down. This is called path, and this element is also called Path. The reason that's important is it identifies the elements by their name, so you wouldn't want to name anything else path on these art boards. Or it would also auto animate. So it can be kind of hectic if you have a lot of stuff going on. But just like a quick note there, and so we'll go ahead and auto animate a couple more of these elements, and I'm holding shift in, dragging this line or to the left until right about there till it's almost invisible. Then we can look at that one more time. Click dartboard on preview. So if we select, we get that to expand on that line. To go across. This animation is pretty fast, though, so we will actually go to five. And if you'll notice five seconds is actually the longest you can make. But it's not one of the selections on the drop down menu, and if we click end a liquid, that is again. We get kind of a nice, slow, dramatic auto animate right there and then we're actually going to do the same thing for this circle. So I'm gonna select the circle and I'm gonna hold option shift and scale this down. That's right about there. And then we'll play this element, and then we get that circle expanding, we get our lines moving, and the last thing I want to do is actually have this image be a little animated as well. So we're gonna do is take this image and I'm grabbing the corner and holding all option. I've been scaling up a little to write about their and what that's gonna dio is also give us a really slow animation for our image as well. So when our user drops into this, they kind of get this curated animation and then we can move on into making this button actually have a hover effect 4. Creating a Hover State (component): So if we go into this element right here, actually, what I want to dio is the reason I created to these prototypes, prototypes the reason I created to art boards because we're gonna take this art board and actually make it go to our main our board. And so it's gonna be a timed zero transition and then we use dissolve, and we can just do like 0.1 here. And the reason I'm using this time transition here that's almost gonna happen instantly is because I'm going to start to make these buttons group together and make them components. And if I do that here, it will actually change the auto animation because I'm changing the name of the element when I group it. So that's the reason I have this, like immediate transition happen. So now if we go into this art board, we can actually just switch to design. Moon can actually just group all this together and a dig group with Command G or controlled GE. If run windows and then if we click in, you can actually right click on the element and go make component or do command K or control Kafer on windows. And once you do that, you'll notice at the top, right? You have a component like master title right here. And then you have something called a default state. So if you go in and click hover state, it will automatically add a hover state for you, which is a pretty cool feature. And then you'll notice if you talk in between, nothing happens here. And that's because we haven't changed anything to make it a hover state. So if we click on this hover state and then select, let say this circle So I double clicked on the circle and I'm gonna hold option shift and I'm going to scale it down and we're actually gonna assume in a bit and then center this a little better, probably right about there. So now if we go back to default state, you noticed there's a change there, and you can also preview it in the preview mode. So there we go over getting that nice response on this first button. That's not all we want to do with it. So that was just a simple scale. And then if you got a prototype, you can actually see a little better what's happening? So the default state has an automatic hover state. So the trigger over here to the right is heavier actions auto animate. And then the destination is the hover state. And then you can change how it animates and you can also change. The duration animates just for reference. I almost never change. These Derby has some great defaults for hover animations, so I usually don't change those too much, so we'll leave that alone for now. But we want to make this a little more parent. That's a hover state. We're actually going to go in double click again on this circle and then fill. But we wanted to be black, and we're gonna make it 100% capacity. Then we're gonna change these elements, the text moments on the inside to be white, and then grab that hero as well to be white as well. And then you'll notice, actually have to click the element again and select Default state again to see it. So we'll preview this. Okay, that's looking good. And so now we have our first like hover element, and basically what that's doing is that showing the user that this big thing is a button, and if we wanted to, we could add one more extra element to this. And that's make the era move a little. So if you wanted to, you could double quick in, select this area and then dragged not that slick this arrow and then drag to the right molding shift when I drag so it stays in the same access and then go back to the default state. And then that way we get movement and color change to make a pretty interesting cover effect, maybe a little more engaging for the user and kind of urged them to actually click this. Now it's good. 5. Utilizing Layer Masks: let's see it from the top of the time. So we have this that appears, then it's gonna automatically transition of that big page where we have this however effect . The last thing we want to do for this home pages were actually gonna make this text animate a little just because everything else on the page is also moving. So we'll give that a little extra dimension. So if we go in, you'll notice that this text is already a mass group. And just as an example, unmasked this group to show you what's happening here. So this text is a path, and so basically all that means is that it was a regular textbooks, and then you hit command eight or control eight, and that turns it into a path. And what that means is you can't edit the text anymore, but it's just a regular vector shape. This could be helpful if you want to animate something's, um and don't want the tech sizing screwing with you. So if we scroll back out what we can actually dio is there a little rectangle here? And then I'm gonna make sure the rectangle is actually a little bigger. than this biggest letter. So expand this a little, and then I'm gonna select both of these by holding shift and then I'm gonna hit command shift in and what that's doing its It's creating a layer mask. And you can also do this by going upto object and hitting mascot shape. Depending on what uh, software you're using, we're actually gonna do is double click en and then dragged this element all the way to the left so that the text we get a little bit that's still there so that the text is actually completely masked off. So that means when this starts, so we'll actually when this starts, this won't appear until it animates on this page and we will actually have to do is delete this one. And the reason I'm deleting it is because we just created a new element. If we dio mass crew for what we can do is copy and paste this over here, and we can double click in semen and then dragged this to the right. So let's take a look and see how that looks. So if we select so we have kind of a slow mask pulling across this area that says new and the thing is that is probably a little too slow. So we'll see one time, Yeah, we wanted to be a little faster than this, but if you'll notice when you go into auto animate, you don't have the choice of animating individual elements. Everything on the art board animates at five seconds, so that means it's going to take five seconds to fully move that mask back over. But something you can do to get around that and have elements animating at different times it's actually double click in. And then if we make this layer mask a lot bigger, what's actually happening is in the first, like second of the animation, The layer mask is already going past the text, and it's gonna take five seconds to get to this point. So what that really looks like is that we have this element animating at a different speed than the rest of the page. So if we quick so the new actually popped up a lot faster than the rest of the elements, and that's because of the layer mask was so big. So it's kind of like a cheat code to get around having different animation times, and what I do now is I'll actually replicate that process. But with the rest of these texts, text boxes, I guess now do the same for this. And if you'll notice these air already in mass groups, so what I'm gonna do is just double click in and go ahead and just edit these rectangles, and then we'll drag this over until you can't see it. And let's just that to get that text coming up and then we'll repeat that exact same process for looks down here at the bottom so we can double click in. We see that rectangle were using to create the layer mask, will drag this over all the way to the left, covers up the text, and then let's preview office. So there's a lot of depth going on because we have these animating at different times. There's some pretty dynamic page movement, definitely a pretty interesting landing page. And then we also have our first et a right there with a nice have for effect. So what we can do from here is move on Toothy shop. Part of this prototype 6. Hover Effects for Text: So if you scroll down, you notice there's shot by collections and I'll go over how this animation was created. Just a second. So the first thing I'll do you, it's actually make sure this isn't a component yet, so you can go in and select the text, and then right click and select make component, and then the same thing we see we have a default state for the master component right here , and we're gonna add a However, if state so we're gonna want to do is hit P for pen tool. We're actually gonna underline this until right about there. Then we'll get a line, they get black and then go to about size five. But you'll notice that the element we just drew is not in the component. It's actually the top called Path three. And what you can do is actually copy path three. So many to command, see or control of the If you're on windows and select shot by collection, and I'm gonna click in right here to this element and then paste. And that's command V or control be if you're on Windows and I'm gonna take this bath and actually just delete up and then I'm gonna double quick in and I'm gonna copy and paste this path one more time and then drag it down and I'm holding shift when I drag right about there and then the first thing Will Dio is well, quick and we'll set up the default state. So just a quick note. It's always better to set up the default state first. Because if you change the hover state and then go back and change the default state, it kind of neutrals out. Um, it, like, resets to the default state, so you always need to do that first. So if we select here, I actually didn't even fall a man rule. We're gonna go to default state first, and then you'll notice right there because I was in hover State to begin with, it actually didn't even copy and paste those elements over. So what will have to do is go to hover state, open this up and I hold shift to grab both those elements and then command see to copy them , and then we'll have to switch back over into no fault state. Open this up again and then paste them out And so that was actually pretty every wonky thing. Um, and it was my mistake for not doing making sure I was in the default state to begin live. So we'll have to double quick in. And what we're gonna do is turn these elements to zero present opacity, and then we'll foot back to our hover state, and then you notice will actually have to delete the fourth and fifth path because those don't exist anymore. And then we can select these paths because we're in heavy state. We want them to appear. So what? You're past the 100 and then we want the lines to drag over, and I'm holding shift to drag the line. There we go. Some can switch back to default state and then preview. So if we scroll down, we'll get a shop collections. Now we get this nice underlined hover animation. 7. Hover Effects for Images: and the next thing we can dio is actually one of my favorite hover animations is we can add image effects. So in all these images on the site, it is a fashion site. After all, I'm gonna hit command ship G. Just make sure this is all on grouped and you'll notice there's actually a rectangle over the top of this And the rectangle is it 0% opacity now? But if we were to switch it to 100 you can tell it fills with this like yellow color. We actually have multiple I selected. So if it were normal, it would just be a blank, a big, giant yellow box. But we want this to be multiplied, and that gives us a pretty cool image effect. And we can actually have this image effect as a hover effect. All we have to do is select both these elements, and then I'm actually going to right click, Then click, make component. And then if you open this up, you'll notice that rectangle is right on the top layer where we want it. So for the component, we will click, add hover state and then default. We don't want that yellow appearing so we can click into the rectangle and bring this all the way down to zero and so just didn't know and say, If you get a default state here, you'll notice that passed through is selected. That doesn't really matter, but it is very important on your rectangle that this needs to be multiply, and then it also needs to be multiply on the hover animation. So if you click over to hover, it's very important that this also stays multiply. If you switch it to anything else, it'll create like a weird, jumpy animation that it just doesn't look good. So just note to make sure that whatever like color manipulation affect your using is the same on the other effect. So if we go to the default states but to the ever state, and then what we'll do is we'll go into this rectangle and then we'll make that 100%. And there was to expect the default state. And then so now if we preview this and select the art board, we can scroll down, that's still working. Then when we hover now, we get this cool everly effect. And so for any of these image overlays feel free to add them to other images on the exact same method that I showed you with this image. I'm not gonna go through each one for these, but it is definitely something that you guys can practice with. Um, but the idea is that each image on this site would have some kind of overlay like this. So if you want to replicate, there's and the other images, you're definitely more than welcome to you. 8. Prototyping with Hover Effects: But we'll also want this element too quick to another screen, so one thing to know. So if we switch over to prototype and select this, you'll notice that we can't actually put another interaction on the default state. You have to have a quick interaction on the hover state, which definitely makes sense, because if an item has a hover state, the HOVER state is what needs to be in the prototype to click. It would kind of defeat the purpose if you click from the default state. So on the hover state, you drag over this arrow and you'll notice you get the same. Interactions is normal with prototyping, so we want a tap. A transition did this page, and we will keep the ease out. So if we preview this and we scroll down, we get this pop up to come out, and actually, we don't want a transition. What we can do here is make this overlay. So we click here overlay and the reason we're making it an overlays because this is mimicking a pop up, so it's definitely okay to have it on top of the screen, so we'll check that one more time so the hover animation has already selected. And then we click in and then we get our ever lakes that's looking good. And just to show quick example of what it is with the default state, So play. Then when this is hovered, you get the option to click in, and then you get this to come. 9. Copying and Pasting Hover Effects: The next thing we can dio is that a little bit, too, are ever lay page. Well, I'm gonna do is select that X right there and prototype it and then just make sure that selects back to this screen, and it doesn't need to be dragged. It needs to be top transition dissolve and he's out is all fine. And the last thing we want to do on this every late page is actually make this add to cart button enemy. So if we quick in you noticed we have a circle behind it and that circle is black filled, it's what we can do. It's actually just take thes and group them and amending Command G or controlled Giefer on Windows. And then, once they're group to weaken right click and hit make component and we're in a default state. Now it's gonna add a hover state, and so we'll click over to the hover State and we'll go into that lips and then we'll change the Ellipse to 100. And then we also want to change our path. Little plus mark here so it changes toe white. But just to add a little more interactivity, reenact DoubleClick end of the path and hold shift and rotated 90 degrees. So if we quick back to the default state and then previous page, what happens is we get kind of a nice little add to CART animation that's a little more interactive, engaging and would maybe encourage people to add stuff to their cart so we can close the window there. And so now, just a quick recap. We have this animation that takes place when you first land on the page. We have our hover first hover button here, shot by collections that would take you to a new page and then the preview window. It has an ad DIC art animation. Then we can close out from there and one of my favorite, um, parts of this. So if we go over here and name this layer just plus sign, since this is a component, we can actually just copy and paste this and reuse it wherever we need to on the paid. So you notice I have a lot of these plus marks in the design. So, command, see to copy that, I'm gonna command V and paste it in that I'm actually just gonna take it and each one of these places and we can delete this old one and then I'm gonna do the same thing for all these other plus marks and how fast forward this bit. Okay, So once we get this bless marks put in place, we can pre or prototype, and you'll notice they actually animate everywhere. So this is a really quick way to put these elements in other places on your pretty types and you don't have to do anymore work. It's just copy and paste in. But they have this pretty high fidelity animation and so definitely utilize that it is pretty nice field to Dio. And we can actually do the same thing with this text right here that we have on this text right here. The same rule applies. We can actually just copy and paste this element and drag it down to about where we need it . Then what I'm gonna do, it's just delete this text underneath and then I'm gonna double quick and and then change the text on top and something funny in and out here. So if you click over to hover state, it's actually gonna go back to the original texts, which kind of always fools me when I copy and pasted over. So just be sure to also change the text on the hover animation. And then we'll adjust these paths by clicking in a little. That one looks fine, but we will hold shift and drag this one over so it's a little closer to that word in default state. Okay, so let's double check out that looks. It's well, scroll down. That's looking good. All these pluses there still working. And then we get this to animate as well when we hover, so that looks good. 10. Creative Hover Effects: so if we scroll down to the bottom of this page, we can add another Another plus Mark here are fast forward that quick just to have them in there, we could do a more unique hover animation with something like this. And what we're gonna do is kind of combine a couple of the things we did at the beginning. So we have here a rectangle and it's actually invisible over the top of this. Your neighbors. If we go to 100% opacity, you can see it's on multiple. I just like the other ones. That's what we can do is drag over, and I'm gonna hit shift so we don't select this background and shift one more time to make sure we're getting this line in there. I'm gonna hit command G to group these or Control G, and then we will right click on it and make it a component. So if we opened this Dianetics, we have that rectangle in there that's invisible 0% capacity. We have the path right there, and we also have the image. This is a pretty pretty packed component, but we're gonna have a hover state to it. and on the hover state will open a component again. Go to the rectangle. It will make that 100%. So we get that same photo effect also on this ever state we want this line to expand. So I'm gonna hold option shift and dragged this line up to right about there, and then we'll actually switch this back to the default state and then preview this Let's scroll down. And then once we get to the bottom, you'll notice we have this pretty cool auto animate that has this line as well as the image effect. And so this is kind of a way you could really jazz up a, uh, hover animation. Feel free to use any of this kind of method or play around with things tried out, see what you can come up with. But I like doing this and it adds a pretty cool element to a screen and usually gets people pretty excited because you want someone to engage with every button you put on a u I. So this is one way to do that. If we scroll down to the bottom, we have this button that will wanna do something when so reach out If you have some ideas for collaborations, So this would be like a link to a contact page or something like that, so we can actually do select both of these, then held shift to grab them both. And I'm gonna do command g, make them a group and then right click on walsum, make a component. And again we're gonna add this hover state. So once you quick into the hover state so you'll notice this This is actually a rectangle, so it's usually easier Just select over here than double again. Actually, what we're gonna do is drag this rectangle up. But we also want to change the text to be the background color. So we'll switch it to that and then switch back to default. And then if we preview this, get a pretty cool effect for this contactar collaborations button. It's a little different than some of the other ones we've do we've done. And then for the last thing will be doing cover effects. For Is this site navigation down here using a pretty similar method what we were in the past. So for a quick end on this button, I'm just gonna delete this bath right here. Some quick on this button, I'm gonna draw path. And again, I just pressed p to get the pen tool to come up. I'm gonna center this path right about there. So we want this path to actually be this orange and will change the size to about five. So this is what we want toe happen when this button has hovered on. That's what we can dio select both of these. And I met command G and group them Open this up, actually, right, click on make component. And then so we're on a default state to begin with what we're gonna dio actually scale this path down to the middle and then change the opacity of it to zero. Because again, this is the default state. So if we click on the element again now to hover stay, we can click into that path as well appear to the left. And then I'm holding option shift to drag it open and change the opacity to 100%. Then I'll click on it and change it back the default state, and then we can preview to see how that looks. So There we go. We get a cool hovered animation for this page navigation at the bottom and just like the one before, I'm actually gonna copy and paste these over. So if we copy and paste this element and dragged down to this section, all we have to do has changed the text on the default state and the hover state. And we don't have toe replicate everything about this animation. But I will drag in, hold option shift and make this line bigger than actual word, and then just delete this word behind it. Then make sure everything centered up here, switchback, the default state, and what I'm actually gonna do is just repeat that process for collections and contacts, but I'll fast forward that. 11. Recap: okay. So we can do a quick preview of what we made. We have our first SETI a right there. This, however, effect here we have our image of the perfect. We can click open and to Kurt close that out. And we have these plus buttons that we copy and pasted over in the replication of that ever effect. I mean, this one that has there image effect, but also our line effect. Scroll down our button here. And then these, however, effects down here. But that's also not to forget our first effect. So if we click in and recap this in a pretty cool effect that drops us into the page and so that wraps it up for this tutorial. If you have any questions, please let me know. I uploaded this file for everyone. Please pick it apart. Try to exercise, go through it yourself and let me know what you think. Thanks for watching