Hover Dropdown Menu Animations in Adobe Xd | Design Weekly

[Music] hey everyone its bleat once again with another design tutorial in Adobe XD and today we'll check out these cool drop down hover animations that are made in Adobe XD without using any other software in the comments below let me know which one is your favorite number one number two or number three go ahead in the comments right now I have a quick announcement to make I've started my own telegram channel or telegram group now for the first one I'll just make this a random artboard and I will place a rectangle right here this rectangle I will make sure that the border radius is about 50 I'll make sure that the rectangles body radius is about 20 perfect and I'll make this this turquoise green or very light teal green if you may perfect and I also give this a shadow of 12 by zero you got it and pick the color up from here and make sure that it's a slightly darker version of this so now this gives it a slightly a three-dimensional bottom kind of effect next thing I need to do is create the actual list which will be list item one and there there you go your first list item make this slightly bigger as well maybe in proportion with the actual text right here and I'll just copy these make sure that the second one is actually named list item two and the third one is named list item three perfect now the next thing that I will do is create another rectangle over this and give it a similar color as this rectangle over here remove the border and make sure it covers a good amount of area on top as well perfect and also make sure that it is behind these list items but above the button the button is actually rectangle xi so it's above the button now for the last step we will create a circle and we'll give it a we'll give it the same color as this background now once I've created the circle I will give it this color which is actually slightly a darker variant of this deal right here and I'll place a closer to this Chevron arrow right here once this is done I'll go to the blend mode drop-down and click on color so ensure that it only colors the drop-down and it doesn't color the white portion outside the dropdown perfect and I will reduce the opacity to 0% of course now that everything is set up what I'm going to do is select everything on screen here and say command K or ctrl K to make it a component and as you can see now it's named this component 8-1 now place it in somewhat in the center right here so this is the default state and in the default state what we will do is we will reduce the height of this rectangle on top so that it only covers up to the base rectangle here and I will also move all three list items to the bottom of this rectangle and also ensure that it's behind everything else make sure the list item 3 cannot be viewed from here perfect now that we have everything aligned and ready what I'll do is I'll click on this plus icon right next to default state and I'll say add state click on hover state right here and it will automatically create a hover State for you I'll click on enter and that's it so in the hover state while the hover State is selected the first step I'll do is to actually click on this click on this little icon hold shift and just rotate it just like this so that it indicates that the drop down has been opened and for this drop down we'll do something different we move it da we'll double click on this rectangle and the text and this little arrow key which is the path here and I'll basically drag this down a little bit not too much just a little bit so that it moves downward but now the second step I'll do is to increase the height of the rectangle on top like this and while we're at it I will select the ellipse which is right here and I will expand it while we're at it I will increase the opacity to a hundred percent of this ellipse and just keep on expanding it until we get the entire area of the drop down now that the entire area of the drop down has been covered and make sure that the list items actually float to the top just as so and we still can't really see them but if I bring them to the top you can actually see them make sure that the list items are evenly placed as we originally had and just like that pretty a pretty okay for now and also make sure that these list items are 0% and no pasty in the first default state but in the hover State willing we'll increase the opacity of these list items to a hundred percent that's awesome now if we go back to default state and we go to prototype mode as you can see Adobe XD automatically sets the hover state or to animate as well as the next state that we want to take it to I'll just say is out 0.5 seconds and that's about it if I play this prototype and hover over this rectangle see how it smoothly just moves up like this and there's also slight ripple effect covering the entire rectangle right here doesn't this look super cool moving on to the next design as you can see I have all the elements that I need here all I need to do is create a rectangle kindest job down menu and make sure that this is about I don't know 200 pixels of border-radius so that you have this rounded perfect with that boom I'll remove the border and I'll give this this reddish hue right here by the way don't get intimidated by everything here I will be giving the Adobe XD file in the description so that you can download it and try it yourself I will place this rectangle rounded rectangle behind all this make sure it's centered as well perfect and I will make sure that this drop-down is now white in color so that we can easily view everything as well as this little Chevron drop-down icon perfect I will give this a slight shadow off about 24 by 24 thing that should be fine and give this the same color as this and give there about 25% of a pasty it looks like a nice clean shadow now comes the super simple part I just create a big rectangle here which just about covers this root angle in the background and I remove the border and I shall give it a color which is similar to this red however if I go to the color palette I will change the color palette from red to this bright blue here that this seems pretty nice and contrasting as well and I'll make sure that I place it just above the rectangle but below the text here and bring it to the top and I shall also increase the the border radius to the same border radius as the circle so to match that and make sure this is first of all behind it so that I can match and I think ad should work no a little more 100 perfect now it perfectly fits this rectangle in the background I'll bring it up so that it's somewhat like this and I'll make sure I align everything now what I'll do is double click on the rectangle so that I can display all these anchor points right here then next thing I'll do is add two more anchor points here one here and one here and that's that's about fine and what I'll do is I'll move these anchor points individually towards the top like this and to give the wave effect what I'll do is I'll double-click on these anchor points once and once again to bring out a wave here and I'll do the same thing for all of these just bring them up a little bit and double click to make them a wave shape bring all of these like this bring them make them a wave by double clicking on the anchor points I'll bring this one here like this perfect this looks this looks like a really clean two three waves that's fine now the next thing that we'll do is hold shift and move all of these select all of these anchor points first and then move while holding one of these just remove them towards the top just like this so that they come in line with this circular or rounded rectangle I will adjust the remaining anchor points by deselecting and selecting again just so that it covers this rounded rectangle in the background and it doesn't overflow like it's doing right now and that is about it the next thing I'll do is go to the blend mode drop down here I'll click on the blend modes yeah and I'll say darken now darken is a little too dark isn't it what I'll do is I will remake it darken and I will make sure this is 50% in opacity maybe even less 25% yeah that seems much better now this gives like a little blood or little wavy kind of effect which both are very contrasting but that is how I can describe it I will now place the list items right below this rectangle first of all and give them ample space so that they seem like a very neat list of items that should be about it reduce the I think the text size a little too big I'll shift it to I don't know 48 mm that's fine enough for right now and one last thing we'll do is actually create a rectangle here on top of everything and drag to select the list items as well as the rectangle on top hold command shift M to mask these items now then the mask is set what I'll do is double click on this group and as you can see under the mask group there is a rectangle right here I'll bring this rectangles top edge to the bottom edge of this top rectangle and align it evenly perfect the next thing that I need to do is shift each of these list items towards the top a little bit the first list item will actually be slightly close to its original position the second list item will be slightly further away and this third list item will be the most the furthest away actually perfect I'll just drag everything here and say command K or ctrl K to make this component the next thing that we need to do is say plus here and say hover state so that you can create a hover state then the next step while our state is selected I will go here the first step is to rotate this triangle as per our tradition and the second step is to actually bring this bring these waves down towards the base right here not too low just enough to fit in all of these items and we'll just double click on each of these once again to make them flat like we had before and I'll double click on each of them just like this and bring them down a little bit this seems to be about right and bring down any of these that we've got and that is about it that is perfect I'll select this again and I'll make sure that the obesity is a hundred percent now so that we can display it perfectly the last step that we need to do is go to this mass group three and bring down bring down each of these list items one by one so list item one of course list item 2 of course and list item 3 is the last list item perfect and I'll make sure that they're also not too close to the bottom ratio perfect now if we go to the default state and we go to a prototype everything is already set for us all we need to do is change their easing to ease in out and select 0.6 seconds as our timing or duration and if I click on this artboard I click on preview again hover over this and see how its smoothly just the wave just jobs down smoothly becomes this blue color and it also displays the list items and also displays these list items which come in slowly as compared to this wave itself that gives it that extra extra smooth effect I like this a lot last design is actually a material design drop-down which I've used the guidelines to create so if you're working on a material design project I think you should use this design to do it so first of all we'll change the font from Gotham to Roboto of course that is the traditional Google or material font and change it from ball to regular of course and bring in this drop-down I can bit closer to this for this one first step is to create a rectangle around this and make sure it's behind everything right here so that we can only see the bark the borders of this rectangle here and I'll change the border radius from 0 to about 1212 should be fine perfect maybe even more maybe something like 16 I don't know yeah 16 it seems much better and I'll make sure that the border is actually 3 pixels and it is also slightly lighter so I'll make sure that the color is not that dark it's light as similar to this text here one of the material design dropdowns has this label on top so I'll just say city I don't know city seems fine and I'll make sure this is smaller so 32 no 32 is too small 48 perfect and I'll put it in the center and create another rectangle around the city and necessarily doesn't have to look like anything remove the border and it should just be white so that it covers the borders of this line so that you can see the difference and make sure the city is placed in the center right here looks pretty good I've grouped these two together so that so that they don't come in happy and also make sure that the drop-down is placed slightly towards the top of this artboard so that you know I can place the list items as well now the first thing that I have to do here is actually create the drop-down portion which is another rectangle right below this rectangle make sure that the border radius is the same as the original rectangle which is 16 and there is no border for this one there is however a shadow which I'm giving 4 by 8 so for pixel on the y-axis and 8 on the blood and the shadow oh should be about 25% and opacity so this is very close to what material design really indicates and I also have a couple of list items one which is Aragon New York basically displaying the cities that there are and maybe one can be I don't know Detroit I'm not very good with my geography so New York Detroit I don't know and that's it I will select everything on screen and say command K control K to make it a component and make sure that first of all this group of drop-down is actually towards the drop-down text itself and 0% a no pasty next thing is I'll click on the plus icon here and say hover state that's it while hover state is selected I'll bring the drop down towards the bottom here with just below this rectangle increases so pasty 200 rotate this triangle as per tradition towards the top and reduce the opacity of this drop down to zero and bring it towards the bottom closer to this drop down menu itself last thing that we do is change the border color from gray to maybe something maybe maybe something like purple maybe like this light purple here perfect if I go back to the default state and I go to prototype is out is not fine we'll have to select easing out and 0.3 seconds is all right everything else has been set by Adobe XD and if I go to play and I have if I hover over this see how this clearly just animates into this drop down here based on material design guidelines of course so that was today's video hope you like this video and if you did go ahead and subscribe to my channel to support it and also click on that Bell icon so that you get all the notifications of all my videos every Monday and Thursday I post awesome new videos I hope you have a great day your head god bless

Channel: Punit Chawla

Views: 103,362

Keywords: adobe xd, hover dropdown menu animations in adobe xd, adobe xd hover animations, hover animations in adobe xd, adobe xd auto animate, auto animate, adobe xd tutorial, auto animate tutorial, hover animation, adobe xd hover, xd hover, design tutorial, ui design, ux design, adobe xd november update, creative cloud, adobe max, adobe xd hover tutorial, adobe xd component states, component states

Id: ZII1R1GPwF0

Length: 18min 13sec (1093 seconds)

Published: Mon Nov 18 2019

Reddit Comments

[u/Letzirk]

I have question on how to ealborate the 17:46 part? As Moving the "Detroit" gray backround to "New York" on hover. I tried to do 2 level Hover state, but it didn't work for me.