Framer Trick: Convert 2D Elements into Interactive 3D Objects

in this video you are going to learn how to convert any 3D element in framer into a 3D object an interactive one and we are not going to write a single line of code to create this we're going to use a component and actually we're going to take a look at three examples in this video yeah three examples three crazy effects and animations and 3D things it's going to be nice uh the first one will be a simple card it's not going to be too crazy but you know we have to start somewhere then we're going to look at a 3D Carousel now that's going to be amazing and then at the end we are going to take a look at the link 3 animation that we can see on the link 3 hero section so my name is nandi this is fre University and let's get started so as you can see here I am in this framer project it's really important that you're going to find this in the description so you can remix it and you know start building with me because you're going to find this starter page here so if you go to Pages starter and you're going to see exactly what I'm seeing here in this tutorial and you can you know build with me um so yeah because I always say that it's not enough just you know watching tutorials you have to also practice and you know doing it with me might be a great option so let's get started we have this card as the first example I'm just going to put this right here so let's just say that we have this card on our site and we want to add some 3D interaction to it let's say we want to make sure that it is following the cursor so for example if my cursor in the top right corner it looks to that point uh by just rotating in 3D space so with this 3D look component that I'm going to show you right now you can do that pretty easily so you can just drag and drop this 3D look here or you can go to framer University it's going to be there at the resources page you're going to find it and you can just copy and paste it into framer so when you Cy and paste into frameware you're going to see this set up the component uh placeholder and it basically means that you have to connect a frame to it and you can basically connect any frame to it it can also be a component by the way but in this case we're going to connect this card to this component so now as you can see the card appears on this LEL component and on the right panel we see all these properties we have the element that is currently connected which is this card we also have the sensitivity we have dragging so we can enable dragging here we have rotation limits here and also perspective that we can enable we're going to grow go through each of these in this video throughout the multiple examples that I'm going to show you but first let's just take a look at how this looks right now as you can see uh as I rotate this or just you know move my cursor and by doing so I'm rotating this uh little element around uh it is moving and it looks great but it still looks quite flat and the reason for that is because it doesn't have perspective Distortion so let's just add that go to the properties panel and enable it it's that easy basically uh the way perspective Distortion works is the higher the value the uh more subtle the effect the lower the value is the more intense so let's just have something really intense by sending it to 500 and now as you can see uh that as I'm moving my cursor around this card is indeed moving and looking at my cursor and uh you know rotating in 3D which looks pretty good so as you can see it's a pretty easy way to like add some you know subtle effects to your cards for example in your site but as I said you can add this to any element on your site but now let's go into the second example which is a 3D Carousel so basically I saw this uh little design by this person I'm not sure how to pronounce this name so I'm not even going to try it but uh he's a really talented guy he posts great stuff and I saw this 3 car and I was like yeah this looks really great and I thought immediately that I think it is possible in framer and I'm going to show you how so first of all we're going to actually create this whole you know circle of 3D cards or images and then we're going to just add this 3D look component that I just previously showed you and um and that's how we're going to have this little interaction so we can drag it around so enough of walking let's jump into the framer and actually create that so the way we're going to create that Circle of cards or images is by having a proper structure so first of all I'm going to wrap this image component in a stack I'm going to press option com enter and now it is wrapped in a stack I'm going to rename this to arm so let's say this will be an arm and I'm going to add a left padding of 24 pixels so now we we have this arm and we have the image within that and by the way just to show you this image component is pretty simple it has a desktop and a smaller mobile variant really really simple so now we have this one arm and basically if you can imagine it we just have to duplicate these multiple times place them right on top of each other and just rotate them in 3D um with different wire rotations to have that full circle if you don't know framer has this feature called 3D transforms uh which basically allows us to do that so for example as you can see if I add some rotation to it and also apply perspective you're going to see that I can rotate this basically anywhere so it looks really really nice so what I want to do here is make sure that the origin point of this transformation is at the left right here so to make sure that the origin point is on the left I'm going to add the origin and then set the origin X to 0% so now as you can see if I change the Y rotation you see that it is being transformed from that left side which is pretty nice by the way if you don't know these 3D transforms in framer don't worry I have a free crash course on this it is here on my YouTube channel I'm going to leave a link in the description so you can watch that if you are a bit confused with these things that I'm showing you right here so now I'm just going to you know zero out these rotations because I was just showing you so that's pretty much that I'm going to also remove this perspective and so this is all we need the origin and the rotation and so let's create another arm right here I'm just pressing commment and D to duplicate this and then I'm going to wrap these again in another other stack option command and enter and then I'm going to make sure that it's set to fit width and fit height and now what I'm going to do is I'm going to rename this this will be called container um I don't know what I did so let's just try to type in container again and so now we have this container within that we have an arm and another arm let's just say that arm one and arm two is that's you know easier to keep track of them so now what I want to do is I of course want to position them right on top of each other so what I'm going to do is I'm going to select the arm two and I'm going to set it to Absolute positioning so now it is right on top of arm one what happens here is that when I set arm two to Absolute positioning it gets a zindex which basically controls if it's above something or below something so if for example this has the index one and arm one doesn't have a z index that will basically mean that the one that has Z index will be above the other one to make sure that these are not conflicting I'm going to make sure to add the Z index one to arm one as well so these are both on the same level I noticed that I have to add this because if I don't it just gets buggy a little bit because of all the 3D transforms and stuff uh so yeah we're going to just make sure to have consistent the indexes on these little arms so now what we can do is we can go to the container and I'm going to add a preserve 3D just to make sure that these children's arm one and arm two are within the same 3D space and then I'm going to just rotate this just a little bit so we can see what we will be doing and also add the perspective to this just temporarily so arm two will be rotated by 30° so now as you can see we can start creating a full circle here but before that I want to make sure that we have a little spacer here because now this is our container here and as you can see the center of the circle will be on the left but I want to make sure that it is on the uh in the middle of this container so the way I'm going to do that is I'm going to just create a spacer which is basically the same size of the image so 330 width and then f height I'm going to remove the field color and add pointer events n and user select L just to make sure that it will not cause any trouble for us so now it is pretty nice arm one is there at its position and this arm two also has a zero right pin this is really important because that's how it is positioned uh at this RAR position so now we can just continue duplicating these so arm three and this will have 60 for example and I can continue doing this and uh I'm going to have 12 arms in total and each will have uh 30 uh plus rotation and so I'm going to do this really quickly and get back to you okay so this is our last card so now we have a full circle which is pretty nice we could also change the images BEC because that would look better but I I just maybe I'm going to just yeah I'm going to change them I didn't want to change them but I convinced myself that I'm going to change them I don't know why but yeah let's just do it okay so I think each image is changed so now we have a full circle of images and they look really nice I forgot to uh name this Frame here so it's going to be spacer and yeah we are basically done with this what we can do now is we can you know change the X back to zero because we don't need this rotation I just wanted to rotate it temporarily just to see that we have a full circle of these cards so now let's set it back to zero and we're going to also set the perspective back to zero because we are actually adding the perspective with the component if you remember from this previous example this is where we are setting the perspective and if we are setting perspective on here as well then it's just going to compound and it's not going to look very good so now we have all these and um and yeah now I'm going to just actually turn this into a component so what I'm going to do is I'm going to wrap it in another frame option Comm enter and then I'm going to call this uh images 3D and then create a component option command and K and uh here within this component we're going to have a desktop variant and I'm going to quickly create a mobile variant here on the mobile variant we select all of the images so I just have to open up all these little uh layers so let me just do that really quickly and then I'm going to select all of these images because as you might remember we have a mobile variant for each of them and we can just easily change that so let's see what happens if we change it to mobile yes the get smaller but we also have to make sure that the spacer is smaller as well here and we get something like something like this yeah so this looks really good maybe I can also change the um spacing here or the padding on the left so each arm is being selected and then the 24 is decreased just a little bit because maybe 12 is enough so now we have a mobile variant as well this will be you know useful when we are wanting to optimize this for mobile devices okay so now we have this images 3D component and we are basically ready to connect this to our Luke 3D component so uh let's just bring it to the canvas again 3D look and then what I'm going to do is I'm going to wrap this 3D look in a stack by pressing option Comm enter and then I'm going to call this 3D Carousel and then I'm going to turn this into a component again option command and K and then I'm going to cut it from here the imag is 3D component that we just created and then paste it within this one here but it is not going to be a part of this uh variant because it will be just connected to this like this and so we have this desktop variant or we can just have it on default because we cannot actually create multiple variants here I'm going to show you how we can optimize it for different view Parts but for now let's take a look at the 3D look here the component itself because now if we take a look at this this is what we have so this doesn't really really look great it's not really 3D so we have to fix this really quickly first of all the default Prim variant here needs to have overflow visible so if there are any overflowing Parts H you know those are visible but still this looks flat the reason for this is because these images uh 3D component that we just created needs to have a little overwrite so this is really important when you're are trying to connect a component to this 3D look component so you want to make a component look 3D you want to add this little 3D interaction to it you have to make sure that you go inside of that component and apply the code override that of course you're going to find in the description um so preserve 3D with preserve 3D as you can see it's a pretty simple code override it just applies this transform style of preserve 3D to the component so now if we take a look what you will notice is that that it's still not working let's go take a look at the images 3D component because there might be some problems here so let's see container is Overflow visible let's see if the desktop oh yeah here it is it is Overflow hidden which is a problem for us because if there are overflowing Parts which there are because this is a 3d effect so overflowing parts will always happen so let's set it to overflow visible and take a look at this again now as you can see it works perfectly and it follows our cursor but as you remember we want to create this dragging Direction so we have to adjust the component settings so let's select the 3D look here and look on the properties panel here so dragging will be enabled and here you can see that we have some more properties now we have a transition I think we can leave it like this because it's pretty good preset we can apply Snapback if you want to so if we apply Snapback the component will always always snap back to that position uh but we're we are not going to need this for now so no and yeah basically that's it so now as you can see if we start rotating this it starts rotating but we can also rotate it like this along the xaxis so that's why we have a rotation limit we can just have an X limit of zero so this will basically mean that we cannot rotate it on the a at all if we have for example like 10 then it means that we can only rotate 10° up and 10° down but if you have zero that means that we cannot rotate at all so now we can only rotate it on the Y AIS which results in something like this looks pretty good right so that's it and of course we can also apply the perspective as you can see it immediately looks so much better with the perspective distortion uh 1,200 is pretty nice so that's it I think it looks pretty good we can make it even better by just selecting this variant and going to cursor repb cursor and applying this grab cursor so when we hover over this we have the grab cursor and we can we can rotate this and yeah and you created this without any code it's pretty amazing right so let's optimize this 3D cursor for more right now it's really easy what we have to do is we have to create a variable here because as you remember we have a desktop and a mobile variant here so if you come here and adjust these or add the variable here create variable and let's call these images then what will happen is that here I can come to this and then just change it to mobile I know very easy um yeah that's it just a small little thing that I want to mention here usually or sometimes or always you decide what happens is that when you start rotating these uh for example these images and uh and you start clicking them you might see that you know you start dragging the image itself uh let me just quickly show you how that actually looks so let me just create a fr frame here and apply an image to that so set an image and let's just apply some random image here and so as you can see if I drag this you see something like this so this can happen when you are you know applying this drag um component what you can do to avoid that is to select that frame that is making the problem and then just set pointer events to none and also user select To None So now as you can see if we go back it will not it will no longer do that thing so you it will no longer uh be selectable and dragable so it's pretty cool so yeah now let's go on the second example or the last one so it's not the second but the third I am going to show you the inspiration for that because it is coming from the link 3 website oops see I'm here in inspect mode sorry I had to get the assets from somewhere so this is what we are going to recreate here you can can see that this looks really nice we are not recreating it uh like uh exactly how it is right here but something that looks fairly similar so as you can see as we rotate uh this uh card around or move our cursor this card or this object is looking at our cursor so you might already guess that we can create this pretty easily and we I'm going to also show you how you can add like an interaction to this as well so like a click interaction where you where you actually interact with the element that you are making 3D interactive so let's go back to framer I already prepared some of these assets so as you can see we have uh two things here Avery and Ariel we have a setup that allows us to rotate this card around and see the other design and the way I did that is by setting backface visibility to Hidden on one and then back face visibility hidden on the other one as well but but also 180 y rotation and also on the phones on the parent we have preserve 3D I also explained it more in more detail in my 3D transforms crash course so you can learn more about the setup there but yeah it's pry simple you can use this for card flips and different animations where you want to show something else on the other side of the element when you flip it around so that's what we will have for each element so the widgets also have something else on the other side as you can see let me just quickly flip it around bubble gum really good and then we also have this little hat here let's also flip that around let's see what we have there a little disc cool so we have all this and we can we can just wrap them in a frame and position them in 3D so let's do that I'm going to select the uh phone the widget and the items and press option Comm and enter my keyboard and then basically we're going to set the widgets and the items to Absolute positioning because we want to move them around freely so the widgets will be here right here and then the um items will be right here somewhere in the top right corner but as you can see we cannot really see them because we have to set this stack which will be called object and we will set that to overflow visible so the overflowing parts are nicely visible on the object I'm going to set transform preserve 3D so the children elements are within the same 3D space I'm going to also rotate this just a little bit so you will see what I do a little bit better so let's rotate it like this also apply perspective temporarily and yes so now I'm going to select the widgets and I'm going to apply depth to it which will basically make it a bit uh you know it's going to elevate it from the card so let's have 50 there and on the items we're going to have the opposite effect we're going to basically put it behind the behind the phone so I'm setting it to minus 50 so now as you can see we have this object and basically the hat and the items are behind the phone and then the widget is above the phone so basically that's it that's the setup that we need now we can zero out these rotations and remove the perspective and we can turn this into a component again so what I'm going to do is I'm going to select the object and I'm going to wrap that in a stack again option command enter and then let's call this link Tre phone and then of course set it to overflow visible so we can see them and then let's uh press option command and enter and then we have this first variant I'm going to immediately add the code override that we have to add here because of course we're going to connect this to our little component and then this first primary variant will be called front and the second one will be called back so on on the back side we can you know simply just select this object here and change the wire rotation like this and basically that's it I know it's really simple but I cannot do anything about this Frame is this easy that's it I can't do anything so now what I did sorry I didn't say anything I just pressed L on my keyboard to connect the first variant to the second one I'm using this little tap trigger here so this interaction will happen on tap and framer will spot the animated between these states so let me just show you I click this and this is what I see I know pretty cool and then if I want to go from Back to Front I again just press L connect it back tap interaction and that's it pretty easy so I can go back and forth like this looks really nice okay so now we have this and we basically have this interactive element here and we can still add the 3D look that we had for the other um you know elements for example the 3D Carousel so let's do that again let's grab our little component 3D look wrap that in a frame option command enter call this link three animation and then turn it into a component then we're going to grab this link free phone cut it with command X and paste it here and so now we are finally ready to connect this right here again the first variant here is Overflow hidden so set it to visible and we basically have this first variant let's rename it to default and let's take a look at this okay it looks really nice and I can click it and it still works and of course I can set the perspective distortion on it as well to make it a bit more 3D and yeah the perspective Distortion really adds so much looks really nice and as you can see it looks at my cursor and it's just amazing that you can do this in framer without writing any code honestly um yeah so that's it basically that was the last uh layo example so that's it for this video I hope that this was helpful make sure to go down to the description I have a bunch of links there remix links framer University links uh tutorial links that are related to this video for example the 3D transforms crash course so yeah watch those things use those things remix those things learn those things uh so yeah I hope that this was helpful and uh if you think that uh you can you want to support me just just go to my freier university side because when I see that uh for example last month like I think we are approaching 30,000 monthly uh visitors at the moment I think there's like a thousand needed to get get to that point so if I get to 30,000 monthly visitors I'm going to be happy so if you want to support me just click on my website and I'm going to be happy then so yeah uh I hope that this video was helpful and I'm going to see you and the next one

Channel: Framer University

Views: 3,723

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, 3d website, 3d website no-code, no-code 3d website, framer 3d, framer 3d transforms, 3d transforms

Id: WdMR737ptFs

Length: 28min 31sec (1711 seconds)

Published: Fri May 17 2024