Recreating Vercel's Smooth Navigation Animation With CSS Only

so this week I was working on my course platform and I went to the versel platform and what I saw there was such a nice animation that I thought we have to recreate this today and that animation looked like this just take a look at the top navigation here and see what happens if we scroll if we scroll you notice that slowly the secondary navigation or it's pretty much the primary navigation moves right next to the logo and the top bar simply Scrolls out of VI and my mind immediately went oh my God we can rebuild this with frame motion we can do this let's go and then I thought there's no need for frame motion here this is actually a really simple animation so today I want to break this down and we're going to recreate this with just a little bit of CSS and a scroll listener in JavaScript so let's do it so as a starting point for us I already created this basic setup which is a really simple react app where we have a few tail in classes that already makes this basic framework you see the top main navigation or breadcrumbs I think and then the main navigation right underneath that and this is what we're going to use to animate if you scroll now you don't see anything simply everything moves out of the way and I'm using react here but you could build this with plain JavaScript as well there's no need for any framework here so let's take this step by step the first thing we can do is make this menu stay at the top and we can do that by using some basic CSS and a CSS we need for that is position sticky and if we go to this main navigation you see that I did not put this inside of the header component because the arrow component is a component that's actually right on top of the navigation component and not it's not nested inside each other and the reason for that is because now I can add position sticky as well as a top of zero to this and what that already does is if we now scroll the navigation will simply stay at the top and this is really the power of CSS sticky so now the next thing what we need to do is make that logo also stay in place however if we would make that position sticky as well it would be sticky until of the next element that will be sticky comes into view so let's say we're going to add a class name on here make that sticky and give it a top of zero you notice that it still Scrolls away because inside of its parent there is no room to be sticky so that's the reason why this won't be sticky just like the main navigation because the navigation is nested inside this main diff and we could move it outside of the header for example add a z index that's higher yeah then you see that this kind of works I mean we would need to do some positioning but this could work but for this specific case I actually want to make this position fixed within this header so that way it's kind of still contained within this main navigation and we could probably even make this a real anchor that goes back to the homepage if you would build this for real and then it would still be part of the heter component where all the other breadcrumbs are and you could probably add things like metadata on top of it so instead of position sticky for this one I would use position fixed and give this for now a top zero and the left of zero and then of course if you scroll it's gone again because our main navigation is on top of it so that means that we would need to add another Z index and then you see the logo appear again and now of course we have positioned this element in the top left corner oh and we should even add a zero here which is not the right position and that is because we still need to take into account the padding that the header has so we're going to make it top four as well as a left of six so it's in the original position again but it also means that this header now has a pending left of 16 so it has some room for the logo to be position it and it is because we're using position fixed the logo doesn't take up the place in the Dom anymore that it would used to so everything simply moves to the left and we correct that with the newly added pening and now if we would and scroll you see that the logo falls into place right where at the main navigation is and if we take a look at for CES example again and you scroll you see that pretty much the only thing that happens now is that the navigation moves to the right and it also seems to move up however that's not really the case it is moving up because you're scrolling it's actually only moving to the right and because you're scrolling at the same time it looks like it's moving diagonally so what we need to do next is we need to know how far to us are scrolled and for that I already went ahead and installed a very small JavaScript package that gives us this value as as a react hook but you can of course also create your own document event listener to get the same scroll position however we are going to go ahead that import use scroll position from react hook Windows scroll and this is a package that I already installed use that if you want but there's plenty of others that you can use as well so this use scroll position we can use in our app which gives us a y value and in there we can use that use scroll position and we pass in a number of 60 which is the time times per second that this should update the number and if we use 60 frames per second we get a really smooth update so the animation will happen as often as possible based on this number we can then create a translate X that moves the text to the right let's take a quick look at that yv value first if we copy that and we go for example to our main and we render that you see that we get a number that updates the Y position if we scroll what I want to do now is I want to convert this number if you go from 1 to 50 for example into a specific range so I want to convert the range 0 to 50 to for example let's say a translate of 0 to 24 pixels so for that I already went ahead and found a very small function online that converts one range to another and I already created that into a react hook that makes it a little bit easier for us so let me quickly add that in here and then we need to import the used memo and what it simply does is it takes a number and then you input two ranges the input minimum the input maximum and the output minimum minimum and output maximum so this range we can then use as a hook down here or we can for example say uh nafx equals use range where we input that y number that we got and then we say range of 0 to 50 which is the Y that you will scroll and that will give us a translate of between 0 and 42 for example so if we would copy this navx and also add that in the Dom for a second you notice that we're currently at 24 pixels down but the value of that X is now 20 and this is because it Maps one range to the other and this value we can simply use to create a translate ax to move that navigation to the right so let's see how we could do that we're going to go to our unor list and add a style tag on here where we're going to add transform and you see co-pilot already guessing what we want or we're going to add a translate X and then we don't want a negative translation but we want to translate right and because this number is constantly updating while we scroll scroll you already see that if we start scrolling now that it kind of makes an animation so let's do it look at that it already moves to the right and it also seems like it's moving to the top and there is nothing else you need to do although there's one small thing that the versel teum also did and that is shrinking the logo down in size as well for that we're going to go back up we create logo scale where we again are going to use the user range and input the Y go from 0 to 50 and then we go from 1 to 0.8 and then this scale we can go to our SVG and we can add another transform come on copilot thank you very much and then we're going to add this scale on top of it so that means if you scroll now you see that the logo also shrinks just a little bit so it fits a bit better in that navigation container and look at that it's only a few lines that we had to add and we didn't need any Library like frame motion I mean your brain always goes towards the tools that you get excited about most like most but CSS JavaScript all these basic tools are so powerful and animations like this are a lot easier than you think often and it's all about breaking them down in these small steps and going from one stab into another making it sticky first then see if we can get the logo in the right position moving things to the WR then scaling the logo down and all of these things combined suddenly result in a really nice looking animation like this and you could of course go ahead and also add a transition transform on here but yeah because it has specific duration as soon as you stop scrolling it starts it is still moving the animation so that looks pretty ugly you could make duration really small but then if it's only 20 milliseconds then what's the added value of that animation so that's why it's actually simply tied into your scrolling position because if you scroll in a smooth way then it will work if you scroll really quick that simply just jumps into place and I think that's okay as well because that way it doesn't get in the way of any UI part at all so despite this being a pretty short video I think it was a really fun one to see how you can build these things step by step let me know if you enjoyed it I'm going to go back working on my course right now really trying to release the first modules still this year and it's looking quite good follow me on Twitter as well if you want to see more updates and then please subscribe and leave a like on the video because that helps me a lot thank you so much for watching and I will see you in the next [Music] video

Channel: Frontend FYI

Views: 9,798

Keywords: frontend, webdevelopment, css, html, animations

Id: Nzn0UMqOOXQ

Length: 9min 54sec (594 seconds)

Published: Thu Dec 21 2023