Awwwards Cloned Animation - On Scroll Navigation (Framer-motion, nextjs, tailwind, react)

hey guys in this video I just wanted to cover a quick tutorial on how to use frame remotion to appear a navigation bar on scroll and disappear it when you scroll back up this was a rebuild from a website name diagram which makes these really cool animations that are really cool and really simple to build in frame motion so let me know if you want to see those but today we're just covering the navigation bar that happens on scroll we're also going to be using tailwind and CSS so to start you're going to want to go so to start go to the link in the description and go to the clean UI template if you want to follow along if not I'll have the final code in the main branch you want to come here and get clone go to your vs code or whatever and here I'm just going to clone my repository paste in just select where you want to create it for this example I'm just going to name my folder Galaxy YouTube and then select as repository destination and open the window dough now you want to open a terminal here make sure you are in the folder here and then run npm install which this should install all the dependencies okay so really quickly just to walk through how this navigation bar is working so we actually are exporting one function which then depending on the rolling Precision of the window we are rendering a different navigation for example when we're on the hero component we just have the regular navigation bar we have navbar fixed which is this you can go ahead and take a look at the code if you want on your own time and maybe learn from how I designed it if you like and then we have a navigation scroll which appears whenever we scroll so the way we're doing this is using state to track if it's scrolling or not we have a use effect and we add an event listener the scroll and then we call the function handle scroll here we check if the windows scroll Y is greater than the window inner height which basically is just the inner height of the hero component then it's true else it's false and that's our state managing our different Navigation parts so we take a look here we see this navigation bar up here and disappear right now it has no animations and it's also off-centered I'll and I'll tell you why in a second so using frame or motion we're going to import here so we want the motion component from framer motion so we're going to be animating navbar scroll so to do this all we have to do is give this navigation bar a motion tag and here I'll I have already provided you guys the variance and I'll walk through what these mean so first we're just going to Define variance these are going to be equal to our nav animation we're going to set in an initial State and this is going to be just called initial if you haven't worked with frame of motion here we're defining what the initial state of our element that we're trying to animate is in here in my object of animations we've defined in an initial property an animate property and an exit property here the initial state will be is going to be a y of 50 pixels up which is going to be hidden in X of 50 this is what We're translating like I said here the navigation bar appears to be skewed to the right but actually this navigation bar is centered we can take a look here left 50 however the div is 50 but it starts here and then it continues there so if we want it to be in the center we could always go here and we do negative Translate we do negative translate X well one half so as you can see it's perfectly in the center now the reason why we don't do this here is because framer motion will render this component differently and this property will not be applied and then our animation will just be skewed so for this reason we have to specify it inside of frame or motion here we just do X is negative 50 as well in the enemy so that doesn't change but we have to specify it there so if you run into an issue that your animations are not looking properly and you're translating them through either CSS or Tailwind that's probably why we're going to get rid of that we're actually going to uncomment our variance here we're going to Define our animate state which is just animate I like to name mines the state they're they're called just because it's easier for me and an exit property of exit this will just be the exit animation that the component will have when it's unmounted so so here you just want to Define these animations usually I would like to make a folder under utilities or a library whatever and just have a whole file of just animations and Export them and then I'll import them up here but for the sake of this video having them at the bottom it's completely fine okay so now what we want to do here is we want to wrap art at nav bars in animate present this will allow animation to happen whenever the component is mounted and unmounted else if we don't have this here we won't see any animation because frame motion will not understand that it's being unmounted or mounted for animate presence to work you do have to specify a key and this could be whatever if you have multiple children you can always do their index but here we just have one so we can have one and if we save that take a look at the animation now when we scroll it has a really beautiful animation so that's all I wanted to cover in this video I know it was super simple but stay tuned for the next video where I'll show you how to animate these planets just like in this website for example how they load in and appear thank you for watching as always the code will be in the description if you want the finished code or the follow along code I encourage you to take a look at the code if you have trouble recreating the UI it's a great practice to just look at other people's code and learn from there so thanks for watching

Channel: Diego Cabrera

Views: 11,854

Keywords:

Id: 1dP6tA26z0Y

Length: 6min 16sec (376 seconds)

Published: Wed Aug 23 2023