Framer Tutorial: Creating A 3D Hover Effect

in today's video you are going to learn how to create this cool 3D hover effect in framer mostly it's going to be no code but we're going to need to write a couple lines of code but don't worry I'm going to provide you all the code that you need so you can just copy and paste them to your project and you're good to go so my name is nandy this is frame University and let's get [Music] started so here we are in framer and we can start off by pasting in this folder image this can be any type of image but I'm going to use a folder here and then the next element that we're going to need is a text so I'm going to just hit the on my keyboard and then click on the canvas this going to say tutorial or framer tutorial folder and then I'm going to make sure that it is white so we can actually see it and yeah it's going to be C she bold and 11 pixel size and then I'm going to select both of these and then I'm going to wrap them in a common frame by just pressing option sorry that was a little confetti there so option command and enter and this way they are going to be wrapped in a common frame as you can see which is a stack it is called columns I'm going to rename it to card so now we can set the direction of this stack to where iCal so now as you can see the folder and the text is right below each other but we cannot fully see it because the size of this stack is not the right size that we need so I'm going to resize it to 186 uh for the width and for the height as well so now we have this card uh we can add some fa color to it which will be 2 E2 E2 e and then I'm going to set a bit of radius as well and then a border color which will be 5% white and we're going to also add the realistic shadow um which is going to be a bit more transparency and yeah I think that looks really cool uh then I'm going to make sure that this folder is set to Absolute positioning so we can move it around freely I'm going to make sure that it is Centered for now and then and we cannot see the text now because it is in the center and behind the folder so I'm going to set the card stack settings and set the distribute to end so now as you can see the text is on the bottom of this stack but I want to add some space below the text so I'll just add some padding to the card stack it's going to be a buttom padding which is going to be 16 pixels and then I'm going to make sure to move move the folder a little bit to the top to make it a bit more centered so I think this looks quite okay and so now I think we have most of the elements I think we're going to also need one more frame so I'm going to just throw it here and then command and x and then command and wi within the card so I'm going to move it to the top so it is behind everything and then set its positioning to absolute so we can move it around freely we can position it to the middle by pressing option Ag and option wi and then set the width and the height to the same size that we have for the card I'm going to rename it to light because this is going to be the light that is going to follow our cursor as we hover over this card and then the FI color will be basically a radial gradient the the middle value will be 80 80 80 and then the outer value will be the same color but we're going to use 0% transparency then we're going to also set a really really big radius so this whole light is fully rounded and then I'm going to make sure that that we remove the Z index and then to make it a bit more smoother we're going to apply a blur here which going to be 12 pixels so now we have this nice light but we're going to set the opacity to zero because by default we're not going to be seeing this light so now we have really everything that we need within this card so we can turn it this into a component so I'm going to select this hit option command and K and just hit create so now we have this component here it has this primary variant which is called variant one I'm going to just call this the default and then what we can do here is we can add a hover state which will be basically the state uh when we hover it so when our cursor goes over the card it's going to go to the hover State we can add it here so just to show it again click hover and then here is the hover state so we can make some changes to the card here we can change the color of the card to 45 45 45 5 so as you can see if I hover this now the background color is changed but we're going to also show this light here so now as you can see the light is also showing but is not following our cursor here so for this we're going to need the code override so I'm going to click light here on the primary variant I'm going to go to code overwrites and then click new file we're going to create a new override we can call this light and then hit create I'm going to just delete this uh automatically generated code from here and then go to framer University because it has this 3D hover override resource and if you scroll down you can find the code that we need for the cursor follow so we can copy it from here go back to our light override paste the code in then save the file file so now we can go ahead and select the light and apply the light over right here so now if we take a look at this you can see that it should be following our cursor what it isn't because we forgot to do a really important step and that's basically that we have to set this default primary variance tag to button because that's the only way it's going to work so now as you can see the light is following our cursor so yeah it is looking really nice but as you can see if I hover over the text is no longer following the cursor correctly and that's because we have to set the pointer events of this text to none so as you can see pointer events none and now even if we hover over the text the light is correctly following our cursor now we can go back to the homepage and apply our last override which going to be the 3D hover override we can apply this to the main card component so I'm going to go to the right panel code overrides new file and then here 3D create I'm going to delete this default code here and then again go to frer university and here we have the code override for the 3D hover I'm going to copy it and go back here paste it in save the file and then we can select it from this drop down and now basically this 3D hover uh override is applied to this card component so now if we take a look it is having this nice 3d effect as we hover the card and also the light is nicely following our cursor which looks really epic so yeah that's it for this tutorial uh make sure to go to frame. numerosity because it has more free resources for framer so I guess that's a really great resource for you to learn framer um yeah make sure to like this video And subscribe for more and I'm going to see you in the next [Music] one

Channel: Framer University

Views: 3,266

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, 3d hover, 3d effect, 3d website hover, 3d card, 3d ui element, 3d card ui, 3d card web, 3d card website, 3d website no-code, no-code 3d website

Id: w0ShwHANdyY

Length: 8min 55sec (535 seconds)

Published: Fri Dec 22 2023