Award winning HOVER animation with Webflow

Key Takeaways

in today's video i'm going to show you how we recreate this award-winning animation inside of web pro let's get started [Music] hey friends this is kawarza again with another webflow tutorial so a few weeks ago ron made this video if you haven't seen it i highly recommend you checking it out he showcased best websites of the month award-winning websites with cool animations and among those there was this specific website with these really nice unhover button animations and i want to show you how to create them in webflow in this video so let's get started so first of all let's have a look and see what they exactly have so they have a title so in this case email twitter ig they have this title or you can say tag and then when you hover uh the white block shrinks in and goes to the corner um the the black one or the darker one grows and then the text appears so that it looks like the text is um already there and it's just uh being shown by this one the white one getting smaller and in order to show you how this works i made uh this simple layout in figma so we have the the darker background and then we have the tag in it but there is kind of like a mask i'm calling it a mask they're masking the text underneath it and because it's um you we don't let anything outside of the box being shown we clip it we don't see the rest of it but so essentially what we see is a light box with this tag on it and what we want to do is to shrink this one down and uh also to make this one disappear and then we grow the black box the the darker one so we see the text so all we do is shrinking this making this one bigger disappearing this and this one just stays where it is so let's let's do this in webflow so what we have here is just a simple container and i'm going to add a link block because we want a button we want to give it a name so maybe something like button wrap and we want to style this i'm going to give it a specific width and height so it's about five ram by three ram uh i played around with the sizing before uh shooting the video that's why i know it but you you feel free to play around and get the size that you want next we because we are using this link block we have some text decoration we want to get rid of that we give it a dark text color by default so for the link for this link block and we want to also give it the kind of dark background that we need so what we also want to do is we want to change this to display flex you see in a second y and center center everything because we are going to add another element which is going to be text block so what i normally do is uh i press ctrl e or command e on mac to add things from the finder so i'm going to type text text block is what i'm going to add and that's ig now let's um change the size so i'm going to use 1.8 ram and one unit list for the height if you haven't seen my video on rams versus m i highly recommend you checking that because i explain everything here with the ram and m's but in short i'm using ram here because i want the user to be able to change its browser setting and when they change the browser setting the button shrinks or grows based on the settings in the browser because rams are getting the sizes from the html element decided by the browser setting okay so now that we have this we can also change this one i believe it has to be white no this one is actually going to be black because behind it is going to be the mac mask layer so i'm clicking on the button again adding a div block and this div block i'm giving it a size 8 ram by 8 ram you see it doesn't work because we want to set it to be absolute for that we change the parent to be from position static to to relative now this can be positioned absolute relative to its parent so it's going to take the space it need needs to take and we are going also to give it this color so now what we want to do is to we kind of want to mask it so let's give it also a good name maybe just mask or button mask because it's a button for now mask is fine and now i'm going to put the text block inside of the mask and what we want to do is to change the mask display setting to be flex center center so we are centering the text easily now we have the text and the mask next i'm going to add the last text element so again text block now we can see it in order to see it i'm going to hide this one for now and change this to be the text we want in this case it's at the bursa that's my instagram now i'm going to change give it a class maybe button text and i'm going to give it the white color that we need um yes this one needs to be white and the size i'm going to make it a bit smaller one point maybe three grams let's see how it is and also the height one unit less that should be fine now you see this text is in the middle of this button wrap the reason for that is we change this display setting to be center center flex but what we want to do is we want to position this absolute so we position it absolute and from the left side we want to have it like 20 percentages 20 20 i don't know 24 that looks good for now um now we can turn this back on again it's in display uh flex so what we want to do is we want to make a circle out of this so i'm going to make a radius instead of being pixels we want hundred percent so it's circular nice again i'm going to hide it so we see underneath it and we also want to round these corners so if i use percentages again this creates this shape that we don't want we want to actually round it using something like rams so uh it's it's now the shape that we want okay let's continue but before that i'm going to turn this back on what we want to do is to change this one from overflow shown to be overflow hidden we don't want to be overflow visible the same goes for the button wrap we want to basically mask everything so we're going to hide it now you see that this text the button text is above everything on top of everything we want to change that by maybe giving the mask a higher z index so it's just bringing it on top now that we have this we can start animating okay so a short recap what do we have we have a button wrap that wraps everything in it then we have the mask which is this gray one with the word ig in it and then we have the text we have the text underneath everything with the mask having a higher z index so it's hiding the text underneath it and everything has an overflow of hidden the whole button so we don't see the text or the mask which are bigger and coming outside of the button so now let's animate so what we want to do is we want to animate this button on hover so we come here to the animations element trigger we want a mouse hover animation and on hover we are starting an animation we can call it hover in because right now that's the only animation we have but in case you have multiple animations you have uh to be better at naming them so hover in for this button a few things that we want to do we want to shrink down the mask we want to grow the button let the text stay and kind of hide this one and i'll show you in a second how so let's start with button wrap selected and we want to increase its size so we need size but before that we need to de define an initial state so when the page loads and when um when before the animation happens what is the initial state so we are going to set it as initials initial state and give it the width and height that we had so it was 5 rams and since we are not changing the height i'm actually not going to even put it in because we are just changing the width uh another element that we are going to change is the mask uh we are going to shrink its size so now we have to give it its original size which was eight rams by eight atrams next i'm going to animate this one so we want to move it we want to move it the text the ig text but its initial state is we want to move it on the x axis but for now it's just zero rims uh it stays where it is at the beginning of the animation um so let's let's use these for now i'm going to choose all of them using shift so click the first one hold shift click the last one and just duplicate them now we can animate them we can now so we have the initial state now we can add the second state uh the unhovered state so we want the button to grow to be something like i don't know like 15 or less like 14 rams for now we want also the mask to shrink its size um to be something like 1.5 to 1.5 ram yeah so it's nice and circle there uh something that i missed here is we want to move the mask from the middle from the center to go to the side so we are going to add a move or the mask being selected at the beginning it's just where it is so zero ram but we want to move it to the left so i'm going to duplicate it again group this with the rest and now we can just eyeball it and we move it -5 ram to the left so now you see that the word g is the ig actually it's moving with it so we want to move this in the opposite direction so we are going to move it five ram uh so plus five the other one is minus five so it kind of looks like it's staying there so if we play the animation we see it actually works pretty nicely maybe the whole button is just a bit too big this looks better maybe 13. so just eyeballing it that looks better to me uh now we can add one last thing so if you notice uh when we are in the non-hover state uh there is a little bit of pixel bleeding so that it depends also on the browser and in the published site depending on browsers and device you might not see it you also might see like a little bit of pixel bleeding because the background is dark and you see it against it there is a nice hack to it we can add another animation so i'm going back to the animation i want to make this button wrap background color to be the same color as the foreground so on the in the initial state so we actually don't see the black or the dark background so i'm going to add a background color to the button wrap and i'm going to change it i'm using this uh i drop color i'm using chrome and it's a extension from webflow i have to be the same color and now we want to duplicate this and we want to change this one to be the dark color that we want i actually don't remember the exact color so i'm just eyeballing it here but it's fine because we're going to have the same for the hover out so now that we have it we see it works but now we need to play with the timing and easing to make it nice so this one the uh the this one or kind of hacking it the background color i want it to actually happen really fast so instead of being two point uh point um five seconds i want it to happen in point uh two so it's pretty faster so now we don't see the transition as much but even it can be one five so this is better and for the rest of them or actually all of them we can we can change the easing to be i like i to be ease out quad which i like a lot so now it's much smoother and the animation happens with a nice easing we can also change the timing by default 0.5 which i don't really like i normally tend to make the animation duration longer this is a nice tip but make it feel faster as unsnappier by using easings so you can try out easings you can even go to custom easing and play around with these yourself and see how it works or choose any of them so if you don't know how they are you can actually play it out from here but again i'm going to use ease out quote for now so this is for hover in now we want to hover out when our mouse goes out we want to start another animation so what we do is we are not going to recreate the animations we are going to just duplicate this and rename it to be hover out so what is our hover out animation it's going to be the same as it was before the mouse entered the space so that means it's essentially the initial state so we are going to delete the rest um check all of these select all the initial states and i'm going to uncheck it so now they are basically an animation but we see that they all happen at this duration which we want to make maybe less to reduce it because we want maybe we want to make the hover out a little bit snappier and use maybe another ease out okay so let's try it out it looks quite nice but the ig seems to be moving a bit strangely that's because we are moving it in the opposite direction what of what it's going and not just that the animation feels just slower in comparison to this so if we speed up the animation we won't also see that problem so i'm going back to the animation hover in maybe the entire thing except for this one which was really fast the entire thing maybe instead of 0.6 we go back to 0.4 and maybe for hover out we can choose something like instead of zero point four maybe three i normally don't use three but let's see how it works so looking at it again okay it's much snappier and maybe the ease out can be also the same duration and the same easing now i think that that's quite nice except for the easing maybe this one should be back ease out thin so it looks quite nice let's publish it it works quite nice that's it alright guys i hope this was helpful and if you want to see more of these webflow tutorials feel free to comment them below and let me know what type of animations or workflow tutorials you want to see on the channel and i'll be added so till then don't forget to subscribe and thank you for watching peace [Music] you