Hey everybody, welcome back to one of the final videos in our portfolio series. Um Today we're gonna be working on the animation for this line here and we're gonna be doing that type of effect that we talked about in the previous video. Um I didn't want to quickly address that we had discussed this I frame before and how when you refresh the page, it jumps down to the I. Frame. Um It actually has been discovered that this is an issue with the embedded cast specifically. Um if I were to change this to a different embedded item, like a Youtube video or something, it doesn't do that jump. So we'll be solving that on our end and don't know, we need to worry about putting it into the code. So let's go ahead and get started on actually excuse me adding in that effect. So before we start I'm going to actually add in just a quick display style here of none for the I. Frame so that refreshing the page won't cause it to keep jumping down. Um by just removing it just so we can really see what's happening on page load with the animation. Um So What we're going to want to do is we're gonna want to first alter how we have this heading we've used and H1 that's not necessary given that we've really defined everything as far as how it looks. Um and we're gonna need it to be um the actual container. So we're going to choose you to a div and we're also going to wrap it initiative. Uh huh. So the gifts are wrapping it. I'm gonna call it typing rappers. And I'm going to give a new class to the area that we're going to type out. And I'm gonna call it typed out. I'm also going to add in one more give that's not going to contain anything inside of it. But we're gonna give it the class of cursor and that's all the structure we're gonna be putting in the actually she mail. The rest will be CSS. So as you can see this hasn't changed anything over here. It all looks exactly the same now. But we're gonna go over to our styles and start writing some of that actual CSS out for what we need. So to start I'm gonna start just at the very bottom of my um CSS but I didn't do it above all the media queries. Excuse me. So start with that typing rapper for the typing rapper. What we need to do is we need to make sure that this is the exact length of the text. So right now if we look at it, this is really large, let me go ahead and make that a lot smaller. We look at it, you can see how big this container is. And the issue with that is when we're typing. We're actually gonna be using width to determine that. And we want the width to go from 0 to 100%. So we want 100% to end at the end of the word. So in order to do that, we need to change it to be in line instead of block. However, we also are going to be adding in a cursor right next to this, that's within that same dip. So we needed to be flexed, we can put them next to each other. So with that being said, we're going to use the very simple solution of in line flex. Now, if we go back and look there, this is the exact length there, which is what we're wanting. So let's go back to our code here. We're also gonna go ahead and find that typed out class and that typed out class is going to be given three principles that are pretty important. Um The first is going to be overflow and we're going to change the overflow hidden. What this is going to do is as the typing effect happens, anything that hasn't been typed yet isn't going to be visible. Otherwise the typing effect will happen, but it'll just kind of move across the words because they still exist. We're not hiding them otherwise. So that's very important. Um We're also going to make sure that the words don't wrap because otherwise it will push the words to the um lower layers, layers as it types it and as they appear. So for a new white space all wrapped and we're going to set that initial width to zero, So it doesn't exist at the beginning, there's no width on it there. So you can see if we set the width to like let's say 50%, it's only gonna display 50% of the word. So we'll set that initial with 20 and then we'll be ready adding that animation in there. So that animation we're gonna call typing. So for the animation we're gonna use key frames and we're gonna define it as typing. And what we're gonna do is we're going to say that typing is going to Change it from a width of zero to a width of 100%. So we're gonna go from zero two, right? 100%. Now we're gonna add in that animation, freaking out. My friends typing. And then we're going to add in exactly how you want the animation to look. So we're gonna add in the time allotment, we're going to start with let's say one second, we're going to add in the steps and the steps that we add will Renect how fast the animation goes across. So at the very least you need steps that are equal to the number of characters which for us it's 16 characters include any spaces or in periods, anything like that. So any individual space that it will be going over where you would be typing will be a step. So for us it's 16 and now we're gonna do end Because we're gonna tell it it's gonna stop at the end of 16 there and we're gonna do forwards oh it's going to do it like that. That's very fast. So we're gonna want to slow it down. Let's try two seconds. Perfect. So you can see that looks a little jiang ke for lack of a better word. Um And that's because we've used um a very low amount of steps. So if we were doing double the steps it's going to look a little bit smoother back to you. Just the difference again it was just not as smooth. So if we were to do let's say 64 steps it's gonna be like much it flows much smoother there. I think we're gonna stick with 32 because we wanted to look a little stuttered. So it has that typing effect. However without that cursor it's really missing that proper typing appearance. So what we're gonna do is we're gonna go ahead and add that cursor class that we've defined which remember is just an empty div we're going to give it a width of high pixels And we're going to give it a background of transparent which is going to be when the cursor doesn't exist because we're gonna have a flash. Um and then I'm also going to give it a margin left of let's say five pixels as well. Just that it's not sitting directly on top of here. Um for appearance just we can see it now we'll change it to black so that's where our cursor will be. Um But what we're gonna do is we're gonna actually make the black appear with the animation. So we're going to find a new key frame called blink yep. And what link is gonna do is it's going to move the color from something to something else. However if we move it from transparent to black it will end up with the capacity in the middle. So in order to get it's gonna kind of go we wanted to kind of have three steps and we wanted to kind of go from um we want to have two steps but we wanted to go from transparent to black but we want that black to be that middle range because it's gonna flick immediately back so I'll show you what I mean if we just do the front too so you can see it's a little confusing. So if we were to do from background transparent two background black And then we were to set our animation here which is gonna be blank. Let's say 1 2nd step in because it's just going to immediately be doing the steps and the ending but it's gonna be going infinitely so because it's almost a little bit of a contradiction but so currently we're not seeing anything because it is staying transparent. However if we were to set this to be black that is our issue here. There were not drinking. Um Okay I think it's probably the step end. Well regardless let's set it up correctly because this is not functioning here. So let's change it back to transparent. We want that middle area to be. So what we're going to say is the from and the two are going to have a background that's transparent. But when it hits that 50% point in the step, background is going to be black and now we get that flash however, that is way too slow. Um two seconds is way too slow. Let's do .75 seconds. Mm Hmm. It's a bit fast straight .9. It was more like a proper cursor there. So now if we refresh, it's doing the full typing effect so you can add in different effects, you can make it so that things coming from the side of the page, everything. I'm just gonna stick with the one single effect just for the purpose of the tutorial. We're gonna do one more cast in this series and we're going to deploy this. Um So stay tuned for that