Build a 3D Site in Framer & Spline

so 3D is all the hype in web design so in this video we're going to take this landing page here and rebuild it inside of framer with no code and in a matter of minutes let's go so here we are inside of framer and the first thing we're going to do here is press F on our keyboard and draw a new frame and we'll set the width to be 100% And the height to be 100 VH so it's going to take up the full height of my viewport and let's click on the desktop frame here and we're just going to set the height of this to be Auto so everything automatically fills my canvas now we're just going to design the hero section of a website so let's rename this to be hero and let's set a background color on this section as well so let's go into my fill and select a very dark gray okay now we can go ahead and add some text so I want some text in the middle here and I want it to say discover a whole new world with animation and you can't see that because it's in Black so we'll go down to the color here and we'll change it to White and I do like the fun inter so let's keep that and let's make this a little bit Bolder and let's size this up as well maybe a bit Bolder than that let's go like 78 and let's also reduce the lettuce spacing so we have something a little bit cleaner and we're just going to make sure that inside of my hero section and just for now let's set a fixed width of 350 pixels so I can see what's going on okay that looks really good now the next thing I'm going to do is actually grab a new frame and I'm going to draw it containing that text and I'm going to set this Frame to be called a container and this is essentially where my content is going to sit in between so I'm going to set the width of this to be 1100 pixels which means that all my content will sit with within 1100 pixels and essentially anything else will be tram tracks on the side and we'll also set the height to be Auto so it takes up the space that it needs to and now what I'll do is go back to my hero section and we'll turn on layout and we'll make sure that everything is distributed to the center just like so so now when I click into my container and we'll get rid of the fill we actually have more control over the positioning so let's left align this for now and that looks pretty nice maybe the this is a hero section of our landing page so we probably need some sort of button component so the best way to do this is to draw a new frame and put some text in it which is the basic elements of a button so we'll have some text here that says get started and let's size this down just a little bit and on this Frame here we'll call this button and we'll style it like so so we'll turn auto layout on we'll set the width and height to be Auto and now we'll go in and add some padding around the side so we'll set the padding to be 15 maybe a little less on the top and the bottom and maybe we want a slight radius on this as well so let's set a radius to be six pixels and I think it can probably do with some sort of color so what I'm thinking is if we grab some sort of pink color so if we take a XX code like this and if we paste it into our fill that looks pretty nice in fact we might even change the size of this buttons as it was feeling a little bit too big and let's change the line height of this text to to Really tighten things up and then I'm going to take this button and I'm going to create it as a component now just a general R thumb anytime we're creating things like a footer a header uh a button any instance where I may reuse this on my website I just want to make sure that I'm creating it as a component so now I can take this component and I can put put it inside my container and let's just fix the auto layout on this so we want to make sure the distribution is set from horizontal to vertical and we're going to make sure everything is left aligned and let's just change the text here and let's just change the padding here okay great so now I actually want to bring in my 3D elements of my website so I'm going to go to a site called spline dodes which if you haven't heard is this really cool site to build and Design design these collaborative 3D experiences that you can really easily embed onto your website now spline have this great community so you can actually go on and actually explore all these different Showcases of different 3D objects so you can automatically add to your website so for example here we have this thing called chips which has this like really cool funky effect uh that plays a lot of motion and as you can see it's got this little effect so when I move my cursor the animation also follows so now to add this back into framer it's pretty easy all we need to go is to the insert button at the top right and we're going to look for the ined function and we're going to drag this component into my canvas and then under the component here we're just going to select the type of URL and we're going to paste the public link from the spline design website and now we can submit that and you'll see that this spline animation will automatically load in place now if I preview this obviously this isn't going to look super great but you can see that as I move my cursor because this is a embed from spline that it's automatically going to follow the rules of spline so I can have this cool sort of 3d effect so actually think this will be really impactful for the background of my hero section but the problem is as this is a container we need to figure out how we can make it sit behind this text here without actually disrupting the layout so what I'm going to do is set the width and height height of this to be 100% which means it's going to take up 100% of the width and height of the frame that it's in so 100% width of this is 1200 pixels and the height is going to be 100 view height and then in my container here if we move this to the top I'm actually going to set the positioning from relative to Absolute so it's actually going to ignore the layout of the hero section and then all we need to do is make sure this is centered and now you can see when when I press on play we've got this cool motion effect Happening Here in the background and we could change this up a little bit if we wanted to let's say if we want to make it so it's a little bit more left Al lines we could do that like so and now we've got this really funky 3D animation inside my framer project and you can see how this could expand across your entire website so if you want to have cool really 3D assets highly recommend you go to spline does and you check out some of their awesome templates on there or even cre your own if you want more framer tutorials just like this one check out the framer master class which is my a toz course on mastering framer by flux Academy until next time I'll catch you later

Channel: Flux Academy

Views: 12,130

Keywords: become a web designer 2022, freelance web designer, 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, become a web designer 2023, Learn to build websites, how to make money building websites, how to build a design agency, webflow, framr, figma

Id: BNYLKuIlazA

Length: 7min 11sec (431 seconds)

Published: Wed Dec 20 2023