Today, we are going to delve into how to replicate the scroll snap effect you observe on the Tesla.com website. The best part is, you can achieve this all in Framer. We'll be using a code override to create this effect as it isn't something you can naturally do in Framer, but don't fret, you won't need to write the code yourself. All necessary resources will be provided in the description, including the project file. All you'll need is a free Framer account. My name is Nandi, and this is Famous University. Let's get started.

Before we dive in, let's familiarize ourselves with the scroll snap effect we are aiming to reproduce by examining the Tesla.com website. As you scroll through the website, you encounter distinct sections. It's not a free scroll, but rather a scroll snap, with each section pausing before moving to the next. It's a fascinating effect, and our goal is to recreate it in Framer.

Firstly, we'll start by selecting the desktop breakpoint and giving it a layout. This essentially means it will operate similarly to an auto layout in Figma. I'll change the Gap to zero and alter the height to fit content after incorporating a frame into the desktop breakpoint. After these modifications, you'll notice that the height of our desktop breakpoint adapts to the height of the frame inside it. I'll then set the frame's width to fill, thereby ensuring it takes up the full width of the desktop breakpoint. The height will be set to 100 viewport height, meaning it will always occupy 100% of the height of the device that the visitor uses to access the website.

Let's rename this frame to 'main' as it will contain all the various sections of the website. I will also remove the fill color from the main frame and set its tag to 'main' to ensure everything is perfect.

This scroll snap effect is achieved by wrapping each section within a common container - the main frame in our case. Each section and the wrapping container are then assigned specific CSS properties. This is where we use code overrides because Framer doesn't naturally allow us to add these CSS properties to the elements.

To add a code override, navigate to the sets panel, click the plus button next to the code, select the 'New Override' option, and name it 'wrapper'. I'll then paste the code override needed for the wrapper, save it, select the frame, go to code overrides, press the plus button, and select the wrapper file.

Another thing we need to set on the main frame is the Overflow; we need to change it to scroll. We also need to add a layout to this Mainframe, turning it into a stack with 'start' as the distribute, zero as the Gap, and make sure the direction is vertical instead of horizontal.

After setting this up, we can start adding our first section to this main frame. Let's create another frame within the main frame, ensuring its width is set to 'fill' and height to '100 VH'. I'll also add a 'section' tag and create a new override for it just as we did for the wrapper.

Now, we can start adding content for the frame. I've already sourced images from the Tesla.com website, which I'll paste into the sections. We'll also add the different buttons and text we see on the website. For positioning and alignment, we'll make use of the Absolute positioning feature and adjust as necessary.

So, what we're going to do is we're going to select this section, and under the layout settings, we're going to change the direction to Vertical. Now, as you can see, the stacks are nicely positioned under each other. 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. I think we need to remove this; now it looks okay.

Let's see what else do we have here. We have two buttons, so let's create these two. I'm going to 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. On this button, we also have a background which is black. So, I'm just going to wrap it in a stack by hitting option-command-enter on my keyboard.

This text layer is inside of a frame. I'm going to rename it to 'button' and in order to have a bigger button like here on the Tesla website, we are going to increase the padding. I'm going to adjust it until I get something like that we see on the Tesla website. So maybe decrease the top and bottom paddings and increase the padding on the sides. I think this looks pretty close. Now, I'm also going to add a fill color for this bottom frame just to have the background. Let's add this black fill color that we see right here. It also has a transparency, so I'm going to set it around 70 or 80; let's say 75.

The buttons have a little bit of a corner radius, so let's go with four. Now, as you can see, we have a primary button and a secondary button right here. To make that, we're just going to turn the base button into a component by hitting option-command-k on our keyboard. 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'. 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. Let's change the text here to Black and the background to white with a 75 transparency. I think that will look great.

On the canvas, I'm going to duplicate this button by pressing command-d. On the right panel, as you can see, I have the option to change the variant to the secondary button. It looks just perfect. I also have the option to change the text here, so I'm going to change it to "Custom Order". Now we have both of these buttons. However, as you can see on the Tesla website, these have the same width. So, what I'm going to do is I'm going to go into the component and I'm going to set the primary variance width to 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. As you can see, we have two blocks here on this section. 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. We will probably put them in a common container, so let's do just that in Framer, which will be pretty easy.

First, let's wrap the 'Model 3' text and the subtitle too. Then I'm going to press option-command-enter on my keyboard. I'm going to 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 to what we see on the original site.

Now, I'm going to select the two buttons and I'm going to wrap those two in a stack by hitting option-command-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. Now, as you can see, these buttons are under each other, so they are positioned vertically. What we want is that 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 going to use a 16-pixel Gap, but I'm going to double-check if maybe they use a bigger one. I think it's a bit larger, so let's go with 20.

Basically, that's it. We have all these little boxes and we just need to select both of them. As I said before, these are in a common container, so we're just going to wrap them in a container by pressing option-command-enter. Now, I'm going to rename this to 'content' because this will be the content on the section. I'm going to set the width to 'fit content', and then the height will be set to 'viewport' because that's how we can actually do these cool responsive layouts. So I'm going to just set it to around let's say 65 VH, which means that it will take up 65% of the given viewport.

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 can we change that? We have these different options on the right panel. 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 going to change it to 'space between'. Now, as you can see, the first block is on the top and the second block is on the bottom. I'm going to set the height to a bigger value to make them a bit further away from each other. I'm trying to compare it to the Tesla website, maybe we're going to go with 80 VH.

Now, it looks pretty similar to the original tesla.com website. All we need to do now 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 Y'. Let's just hit command-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 the 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 VH. So it cannot really grow bigger as we add additional content to it. So what we're going to do is we're going to make sure that the height is set to 'fit content' until we design the whole website.

After designing the whole website, we can set it back to 100 VH so then we can actually launch the website. Now, let's change the text to 'Model Y'. Then I'm also going to copy the subtitle. If it's the same, they use the same text, we can keep it. 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 Y's image. Let's just paste it inside of this section. Make sure to select the section and paste it in. I will move it to the image that we have right now. I'm going to remove the 'Model 3' image and I'm going to set the same things that we set before. 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.

Now, as you can see, it's again on top of everything. We can quickly fix that by removing the Z Index property. So now, it's nicely behind all the content. I'm going to 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 going to remove this subtitle here because we don't need that on this section.

So let's get the 'Model S' 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. Deselect the lock, and then remove the Z index. And I'm going to basically do the same thing for the last section too.

I'm going to probably speed up this section of the video. For the main frame right here, set the height back to 100 VH because that's what we need in order for this effect to work. Now, let's preview this website and see if there's any issues with it.

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. It's pretty cool. I love this effect because it really just makes the website a bit different.

So, 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 Framer.

That's it for this tutorial. Make sure to like it and subscribe for more, and I'll see you in the next one.