Framer Tutorial: How To Make A Tesla Style Website in Framer

[Music] in today's video you are going to learn how to create the scroll snap effect that you see on the tesla.com website and the best thing is that you're going to be able to do all these in framer we're going to use a code override to create this effect because unfortunately you cannot do something like this in framer natively but don't worry for a second you're not gonna have to write code yourself because I'm going to provide you with all the resources that you need just make sure to check out the description for the project file and you're going to find everything in the project in order to follow along with this video all you need is a free framer account that you can create with the link in the description my name is nandi this is famous university and let's get started [Music] okay so before we dive in I think it's a great idea to just take a look at the tesla.com website just to see what is the effect that we are looking to get so this is this scroll snap as you can see these are just like different sections that you see as you scroll through the website and it's like a slideshow that you scroll through you cannot just you know freely scroll I mean you can freely scroll but it has like a scroll snap so each section stops and yeah you can just swipe between them so yeah I think it's a nice effect and let's see how we can create it in framer so after we created the project I think it's a great idea to start by selecting the desktop breakpoint and giving it a layout this basically means that it will act as an auto layout in figma so it's basically the same thing as other layout in figma it makes it easier for us to add different sections to the website what I will do here is that I'm going to change the Gap to zero and I'm going to also change the height to fit content after adding a frame into this tester breakpoint so let's change it to fit content so now as you can see we have this Frame inside of the desktop breakprint and the desktop breakpoint's height is adapting to the frames height inside of this that's the breakpoint so what I'm going to do here is I'm going to set these frames width to fill so it takes up the full width of the desktop breakpoint and and then I'm gonna also set the height to 100 VH 100 viewport height basically means that it will always take up 100 of the height of the device that the visitor is using to visit the website so it's basically creating a responsive website meaning that for example if I'm looking at the website on a mobile phone that has maybe a smaller report then this Frame will always take up that 100 of the report even if I'm looking at the website on a bigger screen maybe on a monitor or a laptop or something like that so viewport height is a really handy little option here because we can also use for example a 50v port height that means that it will always take up just the half of the screen so yeah but in this case let's use 100 H because we need to take up the whole height of the given viewport then let's rename this Frame to main because this will be the main frame or the main container of the website all the different sectionable sections will be inside of this main container or main frame another thing I want to change on this main frame is that I don't want to have a fill color so I'm just going to remove it and I'm going to also set the tag to main just to make sure that everything is perfect so just for a second let's go back to the tesla.com website and take a look at this scroll snap effect so basically the way this thing is built is that all of these sections that we see right here is inside of a container which in our case is the main frame on our website so each of the sections will be wrapped in a common container and all of these sections will get a specific CSS property and the wrapping container so the main container will also get a specific CSS property and the reason because we need to use code overrides for this effect is because in framer natively we cannot add these CSS properties to the elements so we need to add these code overwrites and these code overrides will add these different CSS properties to the elements so what I'm gonna do here is that I'm gonna add the CSS property to the main frame here so the way we are going to add this code over right is by going to the sets panel and here right next to the code we're going to hit this plus button and we see this model right here we're going to select the new overwrite Option and let's call it wrapper because this is the code override that we are going to use for the wrapper and then just hit create here I'm just gonna paste in the code override that I need for the wrapper so let's copy this one and I'm just gonna paste it in here and then hit command and S on my keyboard to save the code override and now I can just go ahead and go to the layers panel and select the frame then go to code overrides press this plus button and then select the file that we need in this case this is the wrapper and then I'm going to select the my code overwrite and basically that's it by the way don't worry because everything that you need will be down in the description so this code override will be provided for you okay so another thing that we need to set here on the main frame is the Overflow we need to change it to scroll we're going to also add a layout to this Mainframe just to turn it into a stack the distribute will be start and the Gap will be zero and also make sure that the direction is vertical instead of horizontal okay so after this we can add our first section to this main frame let's just draw another frame here and I'm gonna remove the fill because we don't need that and the width will be fill and the height will be 100 VH so again to take up the 100 of the given viewport and I'm gonna also make sure to remove this this section and I'm gonna also add a tag which will be section here as I said there are also different CSS properties that we need to add to do the different sections inside of the Mainframe and we're gonna create another code overwrite for that so I'm going to go to the sets panel again press the plus button and create a new override which will be called section and I'm just gonna copy the override that I need right here I'll be just gonna paste it in here then save the file now I can go back to the layers panel selecting this section and adding the code override just as we did it for the wrapper so now everything is set so we can add the content for the frame I already got the images from the tesla.com website so I'm just gonna paste it inside of the sections so the first section will have this model 3 image I'm gonna set the positioning to Absolute and I'm going to set these pins to zero so it always sticks to the sides of the frame okay and now as you can see this pin isn't activated and as you can see it's now bigger than the section so this image is just bigger so you might wonder hey like I'm setting this pin and like it just doesn't work because I I cannot set all the pins at the same time or I might be able to do that but if I set this to zero it doesn't work why is that it's because you need to deselect this little lock here and now you can all these pins to zero and now it takes up the whole Space of the frame so now we have a background image for our section and we can also add the different buttons that we see on the website so as you can see we see a text on the top and we have two buttons right here so let's just add these really quick before we add these additional elements I'm gonna select the background frame which contains the image and I'm just gonna hit command and L on my keyboard to lock it so it's not gonna be a problem for us when we are editing the website so after selecting this section I'm gonna just hit D on my keyboard and type out module three I'm gonna also make sure to have it on top of everything so we can actually see it the reason we cannot see that as you can see I'm moving it up and down on the layers panel but it's steel is behind the image so this is because when you set a frame to Absolute positioning so as you can see we set this model 3 image to Absolute positioning it automatically gets easy index set to one which basically means that it will be on top of everything that doesn't really have as the index set so we're just gonna need to remove this and now as you can see if we move the text here we can now actually see it on top of the image so let's select it and make it a bit bigger let's set it to around 40 pixels I'm gonna use monsteras for this title because that's the closest to the one that we see on the Tesla website I'm gonna also make sure that the weight is set to semi bolt and as you can see the color can stay black okay so I'm gonna worry about positioning a little bit later now I'm just gonna hit command and D on my keyboard to duplicate that and now as you can see it's next to the other text so they are spaced around the section horizontally which we don't really want because we want them to be under each other so what we're gonna do is we're gonna select this section and under the layout settings we're gonna change the direction to Vertical so now as you can see the stacks are nicely positioned under each other so we have a smaller text as you can see right here I'm just going to paste it in right here let's remove this link here and let's use 14 pixels for this the weight will be regular okay I think we need to remove yeah this now it looks okay okay let's see what else do we have here we have two buttons so let's create these two I'm gonna start by typing out the labels explore inventory this will also be of course because we need to have consistent fonts the size will be 14 again and the weight will be Medium as you can see the text is white on the button right here so let's change it to White and on this button we also have a background which is black so I'm just gonna wrap it in a stack by hitting option command and enter on my keyboard and as you can see this text layer is inside of a frame I'm gonna rename it to button and in order to have a little bit bigger button like here on the Tesla website we are going to increase the padding and I'm gonna adjust it until I get uh something like that we see on the Tesla website okay so maybe decrease the top and bottom paddings and increase the padding on the sides I think this looks pretty close and now I'm gonna also add a fill color for this bottom frame just to have the background too so let's add this black fill color that we see right here and it also has a transparency so I'm going to do around let's say I think it's around 70 or 80 let's say 75 and we also see a little bit of a corner radius here on the buttons so let's go with four okay so as you can see we have a primary button and a secondary button right here so to make that we're just going to turn base button into the component by hitting option command and key on our keyboard then just press enter and now as you can see we see the component view we can rename this primary variant to primary button and we can create a new variant which will be secondary button okay and as you can see on the Tesla website the difference between these variants is that the primary button has white text and black background the secondary button has white background and black text so let's change the text here to Black and the background to white with a 75 transparency I think that will look great and here on the canvas I'm just going to duplicate this button by pressing command and d and here on the right panel as you can see I have the option to change change the variant to the secondary button and it looks just perfect and I also have the option to change the text here so I'm going to change it to custom order okay so now we have both of these buttons however as you can see that on the Tesla website these have the same width so what I'm gonna do is I'm gonna go into the component and I'm gonna set the primary variance with two fixed now if we go back you can see both of these buttons have the same width okay so we have all the elements that we need to create this little section all we need to do is to organize them in a way that it looks actually something like this on the original site so let's start doing that so as you can see we kind of have two blocks here on this section so we have a first block which is basically the main title and the subtitle and then we have another block which is the two buttons and after that we will probably put them in a common container so let's do just that in framer which will be pretty easy so first let's wrap these two into a stack so I'm gonna select the model 3 text and the subtitle too then I'm gonna press option come and enter on my keyboard I'm gonna set the width and the height to fit content and I'm going to change the Gap to around four I think that's something similar that we see on the original site okay now I'm gonna select the two buttons and I'm gonna wrap those two in a stack by hitting option command and enter however in this case after setting the width to fit content and the height also to fit content I'm going to change the direction of the stack because now as you can see these buttons are under each other so they are positioned vertically what we want is that path we want to have them horizontally right next to each other it's pretty easy to do it with Stacks we just need to press this little button and as you can see the buttons are now right next to each other I'm gonna use a 16 pixel Gap but I'm gonna double check if maybe they use a bigger one I think it's a bit uh yeah I think they use maybe a bit larger so let's go with 20 and yeah basically that's it we have all these little boxes and we just need to select both of them because as I said before these are in a common container so we're just gonna wrap them in a container by pressing option command and enter and now I'm gonna rename this to content because this will be the content on the section and I'm gonna set the width to I think this I think the width can actually stay fit content and then the height will be set to I think we're gonna go with viewport because that's how we can actually do these cool responsive layouts so I'm gonna just set it to around let's say 65 VH which means that it will take up 65 of the given viewport however as you can see we have this content frame we have all the elements inside of this Frame but they are still in the middle of the container so how we can change that so as you can see we have these different options on the right panel and the thing we're going to change is the distribute property because now it's set to Center and that's why everything is in the center we're gonna change it to space between and so now as you can see the first block is on the top and the second lock is on the button okay I'm gonna set the height to a bigger rally to make them a bit further away from each other so I'm trying to compare it to the Tesla website maybe we're going to go with atvh okay so now it looks pretty similar to the original tesla.com website and so now all we need to do is to duplicate these sections and change the content the text and the images so let's check out the next section on the Tesla website this has the model let's just hit command and D on our keyboard to duplicate this section however now as you can see we cannot see the next section because the way we set up project is that we have this main frame that we created first and it has an overflow property set to scroll and also it has a height set to 100 we age so it cannot really grow bigger as we add additional content to it so what we're gonna do is we're gonna make sure that the height is set to fit content until we design the whole website and then we can set it back to 100 VH so then we can actually launch the website but now let's change this text to model y then I'm gonna also copy this right here but maybe it's the same they use the same text to write here so we can keep it here and then here we don't use any subtitles so we can delete them when we get there okay so model y let's get the model wise image let's just paste it inside of this section so make sure to select the section and paste it in I will move it to the image that we have right now I'm gonna remove the model 3 image and I'm gonna set the same things that we set before so I'm going to set it to Absolute it's going to activate all these pins and set the values to zero let me also deselect this little lock there so I can actually set these values to zero and now as you can see it's again on top of everything so we can quickly fix that by removing the c Index property so now it's nicely behind all the content I'm gonna again do the same thing for the next section just duplicate the section change the text to Model S I think the next that is coming I'm gonna remove this subtitle here because we don't need that on this section so let's get the model as image paste it inside of this one move it to the top remove the Y and then set it to Absolute all these pins are zero they select the lock and then remove the Z index and I'm gonna basically do the same thing for the last section two I'm gonna probably speed up this section of the video foreign the main frame right here and set the height back to 100 VH because that's what we need in order for this effect to work and now let's preview this website and see if there's any issues with it so let's preview that okay let's make this a little bit bigger so we can nicely see the effect and yes as I start scrolling the website has the scroll snap effect exactly the way we want it to so yeah it's pretty cool like honestly I love this effect because it really just makes the website you know a bit different because you know usually you can just normally you know scroll on the websites just like this and this is just a completely different experience so I think it's pretty cool that we can do this in framer so yeah this is how you can create the scroll snap effect that you see on the tesla.com website in framer with some code overwrites make sure to check out the description to find the link for the project file framer University and other useful resources that will help you to learn everything about firmware so that's it for this tutorial make sure to like it and subscribe for more and you in the next one

Channel: Framer University

Views: 8,198

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, tesla website, scroll snap, scroll snap effect, scroll snap CSS, web development

Id: UXe3Mj5OQJE

Length: 23min 2sec (1382 seconds)

Published: Sat Apr 29 2023