Cool Hover Effects In Framer Tutorial

today let's talk about hover effects inside a framer hover effects give your website a polished and professional look and feel and they're actually really easy to do so today I'll be teaching you my technique on how to create these effects inside of framer and once you learn it you can apply this to cards different elements within your page buttons no matter what it is the concepts remain the same as for who I am my name is Danny sapio I'm a senior product designer and framer partner and I'm excited to show you guys how to do this today so let's go ahead and get started all right let's go ahead and jump inside of framer and I'll show you guys how we can do some of these different hover effects so the file that I'm going to be using for this you guys can remix it down below and you can also go to hovers.framer.website and this will show you just a whole bunch of different examples of things that we can do right inside of the framer interface without using any code and I'm going to teach you guys how to do this today so you can see we've got all these cool different effects go and check them out and maybe when you're seeing this tutorial there will be even more because in the future maybe I'll add some extra ones as I get inspired there's also another technique that I'll be showing today called overrides and this is just a very simple code snippet that you can copy and paste inside of your framework file and it allows you to unlock some really cool effects so that you might not be able to do just right inside of the canvas but just to start off let's focus on variance and using the canvas to create some cool hover effects so let's create some text I'm just going to write out button real quick and I want to change this text so I can see it let's use white and we'll go ahead and put this inside of a stack so you can press option command return and that's going to create a stack for us I'm going to update this color and then if you press shift a that'll change the width and height to be fit and then we'll just add a little bit of padding here so 16 pixels should work and then this is going to be your button so you can style it however you want if you want to add some radius or however you like it and now the technique that I'll be using today actually requires another stack around this so just take this button that we've just created and do the exact same thing we just did press option command return if you're on a Mac and shift a to make sure that it's hugging our contents and then we'll just remove the fill so now on that outer container we can turn the whole thing into our button component so now that we have this button I'm going to show you real quick the first one which is just a hover um and Float effect so on Hover the button will float up by 10 pixels and then when the cursor leaves it will float back down it's a very simple one to do so in order to achieve this we'll just come in here and add a hover effect so on our main button component we just want to make sure that our height is set to fixed and we want our overflow set to visible and I'm just going to add a little bit of padding on our hover variant so that it pops up so on the bottom we can add 10 pixels and that'll make it float up nicely and if we go ahead and play this you'll see that on Hover very simply without using any code we are just able to make our button float up float back down so it's kind of a cool effect very subtle but it gives a nice little polish I do really like this effect you might also want to do one more thing and just add a cursor style so under the Styles you can add this pointer and that just makes your button look actually clickable okay so that's the first effect that's our float on Hover the next one that I want to show is very similar we'll just go back into the same um one that we just had and I'll show you how to make this a little bit more 3D so in order to do this I'm just going to invert some of the colors so I'm going to make that background white and I'm going to make my text purple and now on our actual container I'm going to add that purple fill and I want to add the same amount of radius that my button has we'll add 8 pixels and if you also add a little bit of a border here it'll just make it look a little bit more like it's popping out from the same thing so you can see here I have this kind of 3d effect we'll come back into the file and I'm just going to pop this in here real quick so that we can preview it all right so you can see it's the exact same effect that we had before except now it creates a 3D button effect which is pretty cool the next one I'm going to show you is this first one here and this is where on Hover our text kind of floats up and the other text floats back down so in order to achieve this and just write out some text real quick we'll say button again and I'm just going to duplicate it and put these inside of a stack together so press option command return and you can press shift a again to make sure it's fitting and I'll remove the gap so now on this I'm just going to actually make the height be fixed because we want to hide that second one and I'm just going to set distribute from start so that's going to allow one of my text to be on top and one of them to be on the bottom and now on this container again I'm going to add another stack around it we'll do shift a one more time and now we'll just add a little bit of padding so now that we have this kind of button container what we're basically going to tell framer is on Hover we want this we'll call this button too on Hover we want this text in here to go up and the other one to come back down super simple to do we'll just add this hover State real quick and I'm just going to change the distribution so right here I have the distribution set to start I will set it to end and you'll notice not a single thing happened but if we come in here and preview this it actually works quite nicely so that's another cool effect that you can do very simply inside a framer without using any code all right so now that you understand how to use hover effects inside of framer using just the canvas I want to show you something really cool called overrides that allow you to do some super cool different effects inside of the interface and all you have to do is copy and paste a quick code snippet so inside this remix file you'll find a whole bunch of really cool overrides that I've added in here for you guys to try out so if you just come down here let's say that button that we just created if you want to add an override you just come down here click the plus icon and then let's say we want wobble on this one we just select it without doing anything else framer uses that to add the effect to our button so that's pretty awesome already and if you guys know a little bit about programming you can create your own overrides and if you're not sure how to do that I have a website that I created called framer overrides.com and you guys can go there and get some new overrides if you'd like and then once you have a new override I just grabbed one from the library called burst so I can come over here and all I have to do is add that new override and if I press command V and save it now I have a new override that I can apply so there's no components here there's no variance you really don't have to do anything at all you just apply it to your container and now very simply I have this kind of neat 3D popping out burst effect so that's another technique that might help you as well when designing your website inside a framer but yeah these are the two techniques that you guys can use you can let your imagination run wild and I'm really excited to see what you guys are able to create with this technique inside a framer alright guys that about does it for today I hope you guys enjoyed this tutorial and found some use out of it if you guys are excited about framer and want to learn more be sure to join the wait list down below there's a link Flex Academy is currently working on an in-depth framework course that's going to teach you how this tool Works inside and out and all the skills that you need to harness become Advanced inside of framer so be sure to join the waitlist below and if there's any specific types of content that you guys would like to see about framer leave a comment down below and we'll do our best to make a video on it I hope you guys enjoyed this video be sure to like And subscribe and I'll see you in the next video

Channel: Flux Academy

Views: 22,333

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: T-2jliitju4

Length: 8min 51sec (531 seconds)

Published: Wed May 31 2023