 In this video we're going to be continuing with the navigation that we've worked on for a few times now adding in one more micro interaction that we can do where when the person opens the navigation menu the items are going to slide in one at a time and then fade out one at a time as well once they close the menu. It all happens pretty quickly so it's not just one going at a time we don't want to slow things down too much that helps add to the site a little bit and make the user experience just a little bit more pleasant. Hi there and welcome if you're new here to my channel my name is Kevin and here we learn how to make the web and how to make it look good with weekly tips tricks and tutorials. Before we get into the content of this video I just want to let you know that I'm creating a new course that I'm really excited about it's called CSS Fundamentals. This course is for people who have started to learn front-end development but are getting really frustrated by CSS or people who are coming from maybe a back-end environment or coming from a JavaScript world who are looking at CSS and just going this is the worst language ever they can't wrap their minds around it I want to show people that CSS actually does make sense and it's not so bad after all it's about learning the fundamentals of CSS how the underlying logic behind CSS because it is there is a logic that is there and to it so the course is only going to be launching in March of this year so if this sounds interesting to you if you fit into one of those two molds the address for it is css fundamentals.training you can get more information for it there and there is somewhere you can sign up to get updates on the course I'll have a couple of them as time goes on and as we get closer to the launch period more and more information about exactly what you'll be getting with the course also if it does sound interesting to you please put your email address in there there'll be only a one-week launch period for this course and if it's something that interests you I don't want you to miss out on it so please go over there sign up for those updates so you can be one of the first to know about when it does come out with all that out of the way in this video what we're going to be doing is bringing in those items one at a time we're going to be looking at delays animations through CSS we're going to be adding in some transitions and really importantly the timing of things I want to make I want to look at what happens with bad timings as well as good timings because as much as you can do good with these types of things if you set things up that are moving the wrong way or they're going too fast or too slow it can actually be bad for the overall user experience because those stand out if you do these things properly they become almost not you don't notice them really whereas if you do them badly that's when people are noticing them so we want to make sure people aren't noticing the problems that could come up from stuff like this so I want to look at the bad way of doing it and then what we can do to fix it so when you're doing it you have an eye of what to look for and a few ideas on how you can you know fix things to make them look a little bit better when you're working on them on your own site let's get to it all ready so we're ready to get started with this now one quick thing that I just want to say before we move on in the original one where we looked at doing it my javascript was simply just to toggle the class of site nav open on and off I've changed that now to toggle it between a site nav open and a site nav closed classes and the reason that I've done that is and the reason I've done that or if we just come here so you can see it has site nav closed and when I open that it switches over to site nav open so it goes back and forth and it's because we want to be able to use both those classes for the different animations that we're going to be doing on this one okay so the very first thing I'm here with all my site nav stuff and what we're going to do is where I have my list items here and I'm going to play with this a little bit and the very first thing I'm going to do is I'm actually going to set the opacity on my site nav li to zero so we can see now if I open that what we got to save and if I open it everything is gone so obviously I want those to actually fade in so how can we do that I'm going to create some keyframes for this one so let's come down right to here since that's after that and we're going to add keyframes and I'm going to call it fade in and my fade in here so if you don't know about keyframes this is just how you can one of the ways you can create animations it's a little bit like a transition but you can control all the different states so I'm going to say at zero percent we're going to have an opacity of zero and then we're going to for now we're going to make this a bit more complex after but let's just go to opacity one now if you find yourself creating keyframes that are just like this I think it's not really worth it and you can just use a simple transition between two different states and you'd be completely fine we're going to make this more complex though but let's just do this for now to make sure that this is actually working so what we're going to do now is right here we have my site nav open li so my list items when it's open are going to get the animation fade in uh let's just do linear for now as the timing function and we're going to do let's just say one second we're going to fix all of these numbers up uh oh don't forget the semicolon right there so it's going to use the animation called fade in so it's looking at this keyframe it's going to do it with a linear timing function and it's going to give it the duration of one second so let's go and see what that would actually look like you can see they fade in oh but then what happened they're gone that's weird right and it is weird this is one of my pet peeves a little bit with these animations is when the animation is finished so it runs through it fades it up to here and then it goes okay i'm done let's reset back to what the default state is which is over here the opacity of zero so if ever you have an animation that you want but you want it to stop at the end instead of resetting back to the beginning you have to add in the word four words right there so that means it's going to run forwards and then stop it keep that end state so let's try that again we should see they fade in and actually let's make this like they're fading in pretty fast actually i thought one second to be a bit slower there you go you can see they very gently are fading in when i close it though they're just disappearing so as soon as i could close this isn't being applied anymore so they're just jumping back to this li state here with the opacity of zero so you notice again when i click here they're gone which is kind of weird so the next thing i'm going to do is let's try and make this a little bit more complex because when i click that instead of just fading in i also want them to be moving a little bit so let's add that in here too where i'm going to give this a transform and we can do all this on multiple lines if you want so i guess we can set it up my zero is going to run transform um will be translate x and i'm going to start with a hundred percent we're going to play with this number a little bit so we can explain a couple of things along the way and that's going to start there and we're going to whoop i should have grabbed the whole thing at a hundred percent we want my translate x to be at zero so it goes when the animation is done it's moved over so now when i open this they should slide in and fade in at the same time and it takes two seconds to do the entire thing so this is where animations come in so when you start using your keyframes your animation it's because you wanted you multiple different things at the same time is part of it but right now we're also running between zero and a hundred percent the nice thing with these keyframes is you can actually add midpoints so i could actually come in here and say at 75 percent or it could be 50 percent or wherever you want and we can add in another one so what i'm actually going to do is i want the opacity to be like point two at this stage so let's see what happens if i save that um actually you know what let's just make this zero so it makes it a little bit more evident what's happening so they're already going to be moving now they should be see there we go like they've already moved we're starting them all the way over here and they're only going to start appearing when they're 75 of the way finish the animation so let's open it new so really late i find that kind of weird because you have this awkward delay that's coming in part of that is this time is way too long as well so the next thing i'm going to do is i want them to be at like point two at this point i want them appearing but um i don't want them to be just like you know i want them to be a little bit there but not all the way in yet i'm going to change the time on this a little bit should we yeah let's do it like 750 milliseconds just to speed it up and let's check this out again so you can see they come in much faster now see how fast that is it seems kind of weird and they're really just like and they stop they just stop and that's because we're on linear so we could use something like ease in ease in out ease out let's just say we went with ease in it's not going to be bad ease in is going to mean whoop we did the wrong one ease out that sort of sped up as it went along there we go you can see they sort of slow down as it pulls into place so that's already better they're moving really fast though but it's much better than what it was before it feels a little bit more natural if you really want to make things look more natural though i'd really encourage you to use a cubic bezier instead of using um just one of these default timing functions now there's two different ways you can do it there's this fantastic site um so yeah there's cubic bezier dot com which is really nice because it gives you an idea and you can get a little preview of the differences here most good cubic beziers do something like this and then go so they start slow they go fast and then they slow back down again so that's this pink one at the top here so you can see it's going slow fast slow it just makes it feel a little bit more natural because it has to accelerate something in the real world usually has to accelerate then it needs to start slowing down again before it just stops so most of them are going to look something like that now if you don't want to open up your own you know cubic bezier dot com which isn't too hard to remember you can also open up your dev tools shift command or shift control c and mine were not docked in um so if you find something that has a cubic bezier on it so it's my li's here here we go where it says ease in you see this weird little thing here i'm just going to click on that chrome has something really similar to and look at that you get these nice things so i'm going to go to ease in out because it's already going to give us something and you can play with these a little bit and you can see if i drag this around it's starting to move everything around and you can see the numbers right here so you can just copy and paste it afterward now the nice easy best starting poise is point five i'm never going to get there just through dragging point five zero point five zero and then over here a point five and then a one is like a really nice starting place because it's just this really consistent curve it's not too extreme that it goes flying anywhere so if you're not sure where to start point five zero point five one is a really nice starting place for these but then of course you can experiment with it a little bit more as you're going i think i'm just going to pull this one back a little bit so it starts off a little bit faster but then slows down and then we can do something like that um and we'll copy that whole thing and replace what right there and let's hit save on that and see what it looks like so let's try that one more time i just find a nice slow way to come in now it's using this cubic bezier for both the opacity change and the transform so that is important to know the other thing i'm actually going to do on this is i'm going to copy this and normally it'd be all the way at the top of your site you'd have your root where you might set up some custom properties so we could just call something here like bezier and put it there because if you're using it over and over again you don't want to type all this out you just want a nice little keyword that you can use so i think i'm going to do that so var bezier if you don't know about custom properties i do have a nice six part series on them there should be a thing on the screen to get to that or a link down in the description below where you can watch that series on custom properties and all the amazing things you can do with them and again normally you'd find this root all the way at the top actually let's bring it up there now that we created it just so we follow some better practice okay so it's sort of working but it's okay we'll leave it like that actually and we're going to do a fade out next because when we close it we want it to fade out and this is the whole reason i had my site nav opened because i also want to do something similar for my site nav closed li and that i want to run an animation now what i was actually hoping to be able to do was something like this but do reverse uh because you can run reverse you can run animations backwards no problem at all you just put the reverse keyword in there and they should run backwards but you'll notice it's still not working when we do that and what we actually need to do in this case is come up with another animation that is my uh so i have my fade in so i'd actually have to come in on something like this and just because i can i'm gonna shrink this down so it takes up a bit less room uh because i don't like my keyframes taking up a lot of room i think we can still line everything up nicely you know we could you know you can space things out so opacity is in the same place on all of them and the transforms in the same place and all of them something like that um just to make life a little bit easier so it doesn't take up as much room because what i'm going to do is copy this paste it but we want to switch it around so this should be one i'm actually going to have this at like a zero zero i think would be fine and i think we can leave that just like that for now that's hit save except this we should be called fade out and then over here we'll keep this as four words and we'll call it fade out and now we should be fading in except we have a problem have you noticed the problem there's two problems one of them is they're moving the wrong way so let's switch this around because that's the easy one to fix zero and 100 but there's also a thousand wow that's pretty moved over um so now they're coming in and they're going out oh there we go fading in fading out haha we fixed i thought there was two problems but it turns out there's only one um so it is technically working and you can see that it is working pretty well but something feels a little off about it i find the first thing and this is where we got it working we get it coming in and we get it going out that way uh one of them is that it's going out that way if you try doing it where it's actually going out the opposite way i find it super unnatural where it like moves the opposite way that the menu shrinking so right now it's moving in with my menu but then it's moving against my menu i find that really awkward so just make sure i i think i'm saying just make sure but i i find personally that it makes it feel a lot more natural when things are running in the same so it comes out with my menu and my menu goes the other way it pulls back the same way my menu shrinking i find that makes it feel more just organic the next thing is um this is really common where you end up with like you want to move it off the screen and into the screen um it's sort of the reason why i did this though i think it makes a lot more sense to start this at not so far away so say you did like negative 200 pixels or something like that it can make it feel so much more natural not negative we should be positive 200 that moved the wrong way again um but as a positive see how it still gives you the illusion that it came in from really far but it's just sort of fading in a little bit there because when it first starts coming in it it had the opacity of zero and then it moved just a little bit and then at that last step that sort of comes all the way in so the fade in there just seems it's already in motion when you start seeing it so it could have come from really far but because it's not moving so fast it just feels a little bit nicer and of course we can do the same thing the other way where this could go like 200 pixels or it could maybe go more the other way just to speed it up while it leaves but um actually i think i will do more because it looks like it's slowing down a little bit too much on the way out and that looks a little bit better to me i might even change that a little bit on the way out but before we do that the last thing i want to do which i also find helps with things overall is when they're coming in a little bit like a staggered they're doing one after the other after the other so whenever you have an animation you can also add a delay so it's your animation delay it could be another number that you just add here because this animation is shorthand for the animation name the animation timing function the timing i guess and the direction i think it's animation direction it could be wrong on that one but you can do an animation delay and i'm just going to do one second here so we can see what it does so it oops i did duration delay i was like yeah nothing changed there uh so there we wait a second and then the animation happens so if we want to we can also delay this by saying and actually i just realized i put all these before my keyframe a lot of the time i do it the other way around just because it's easier when you're reading the code but anyway we'll leave it like this for now um what we can do is i guess we'll do it here uh yeah we'll do it here and we'd have my site nav open li and then enth child one and on my enth child one we want to give that an animation animation can i just write delay and it figures it out yeah and how long we want to delay that for i'm in it for now let's just do one second just so we can see what's happening where it's only going to affect the first one so do you see that it closes that way but when it opens all of them come in and then that first one came in so i think that's a really long delay though i'm going to say like 100 milliseconds and even if you did the first one without a delay on it you could even you know we could do a zero and again i want to save a bit of space because this is going to take up a lot of lines so i'm going to do it like this copy two three four five and then we want to change all these so now when i click it should be one two three four five so you see how they all they sort of come in one after the other like that and it looks kind of not like it just they're all settling into place as the menu and i also think because of the circular nature of the menu like the way it grows in i think it feels more natural that it works that way as well maybe these delays could be a little bit shorter to be honest with you so they just all move into place a little bit faster but overall or maybe this one could actually be at zero then one two three four so if you are using something just like this one maybe that's worth experimenting with just to see if you think that that would work a little bit better for you and then what we could do is copy all that and then here on the open instead of open we want all of those to be on closed and then these delays would get switched or whatever five four three two one so we're reversing the animation delay so the first one is the you know we go in but then we go out we want it to start at the bottom so we go in that way and we go out the other way except there's a little problem there look at that see how they come in and when i click they vanish before they start to work the problem that's happening right now is we have an animation delay of 100 we have an animation delay on them so before the animation kicks off they're going back to this state and i'm actually wondering if we still need that to be honest with you let's try without it because of these animations we have on there yeah you can see that weird thing that goes on there because of the delay so we actually need to have this on here but i'm going to have that on site now open uh or you know what just to make it even more clear on everything that's happening here site nav open will be opacity of zero and my site nav closed will be an opacity of one so that's the starting uh we'd say like the starting state for the two of them right so it's starting at an opacity of one it's just going to prevent that weird flickering thing from going on so now they all fade in properly and then we click there and they all disappear properly as well and i'm actually thinking see how when i open it they all sort of come in but when i close like when i close it they're the home hasn't even started moving yet so there's two solutions to that i think one of them could be like a 500 millisecond we could do that where they're going to come in and it's just going to go a little faster to get rid of them or maybe in this case we do a zero one two three four and it's just going to make them get out of the way a little bit faster because i think it's the home still not there uh overall maybe we could even put a little bit of an animation delay on um or a transition delay so we could do that where site nav or actually be up here where my supports is clip path uh here even i could add in like a 250 second millisecond so this is on my transition but it's still adding a delay to the transition actually we don't want that uh yeah that's actually exactly look when you go like that it looks pretty good because of my little turning x the timing of it doesn't seem so bad um actually i think i'm just going to do it here transition delay oh not even on that one we're going to do it on the site nav close site nav closed uh transition delay of like 250 milliseconds maybe so when it opens it opens right away and we close they start moving out of the way and then it closes with it so it looks like here we go and then woof the rest of it closes um they're already they've already accelerated up to speed so it looks like they're getting pushed along with the menu closing so just looking at the timing and looking at the way those are interacting with each other with all these different animations that are going on i think is very important so that's about it i think we've completely wrapped up this navigation for now i do want to re-explore this to make it as an accessible as possible type of navigation because there are some accessibility issues with it as it stands but for now i want to focus more micro interactions we're going to have some other ones in future videos if you have any ideas for ones you'd like to see please leave a comment down below to let me know about what it might be because you know and the more we have the better the more stuff we can explore with these fun little animations and fun little just interactions we can build in for the user so please let me know about that with a comment down below if you learned something new in this also let me know what it was down below i'd love to know when people are learning new things through these videos if the course sounded interesting to you and you didn't yet go and sign up don't forget it's cssfundamentals.training and go there and sign up to get updates you don't miss that one week launch period thanks once again for watching a big thank you to my patrons for helping support everything i do here on youtube and of course until next time don't forget to make your corner the internet just a little bit more awesome