Customizable typewriter animation with CSS

Key Takeaways

so the other day to avoid doing work i was scrolling through twitter as probably do way too often and as i was doing that i came across this tweet by prantham who made a css only typewriter uh effect and i thought it was really cool so of course instead of just looking at his code and getting back to work like i should do i thought to myself it would be fun to try and do that without looking at how he did it and seeing if i can pull it off so in this video we're going to be diving into how i did it and how you could integrate it into your own projects hello my friend and friends and welcome back to the channel if you are new here my name is kevin and here at my channel we learn how to embrace the cascade and just fall madly deeply in love with css by having a lot of fun with it sometimes we go deep into the fundamentals and other times we learn a lot like building fun things like this instead now one thing when i was creating this that i wanted to make sure of it was that it would be as customizable as possible and my idea with it is i would make it work for me but i also want to make it easy for you to integrate into your own projects so we can adjust the speed of it really really easily with one custom property being updated if you change the text that's inside of it you can also update that really really easily everything is just always gonna be working you don't have to like fiddle around with it and try and fight with it or anything like that you don't have to get javascript to start figuring out the widths of things or anything you should be able to just throw it in there and get it to work so i'm pretty happy with how this turned out i did have to check out pranthom's a couple times not so much for the code but to make it look as good as his look to get like the the timing of things down as we'll see so a really big thank you to him for for posting that tweet that inspired all of this and i would definitely i put his link to his twitter down there because if you're not following him and you do enjoy css he's just always dropping really awesome css stuff continually over on twitter so go give him a follow if you aren't already now let's go and dive into this video and see how i managed to get this done all right so we are here in vs code and there are a few very important things or one very important thing to start with is whatever text you want to be doing this on it ideally it should be kind of short but you will also need to have a right here a mono space font on there so i'm using source code pro from google fonts it must be a goo it must be a mono space font because if the letters have different sizes to it this whole thing just collapses very quickly so that is one thing now luckily that goes really well with what we need other than that you don't need too much you can see i just have an h1 here that says hello my name is kevin and that's all we need for this type of thing to happen so what we're going to do is there's other approaches you can use for this for sure but what i'm going to do is i'm going to be using befores and afters to pull this off and if you know me at all you know i love my pseudo-elements if you're not comfortable with them i would really strongly suggest that you do get comfortable with them i do have a card popping up right there that goes into how pseudo elements work just because it is a really big part of how i'm going to be doing this um so yeah just so you're not left a little bit confused by how it's happening that could really help you out if you want to just keep on going see if you can get it working and then check out that video later it will be also linked down in the description below um so with suit elements you do need to have a content property on them and so that's going to help and for now i'm going to give them a background or we should give them different color backgrounds so i'll separate that out actually and i just like doing that so we can actually see what we're working with um i'm i'm gonna give them all we might change a little bit of this but for now we're gonna do a top a right of zero a bottom of zero and a left of zero and of course if you're doing all this you should be putting a position on them so we'll do a position absolute now i don't want this to be absolute for the whole page i want it to be relative to my h1 so we'll give this a position of relative to make sure that the h1 is the containing block right there we're gonna we'll just do with one of these for now so one of them we can't see them yet but let's say my h1 before we'll start with that one and uh we'll just give this a background background of let's go with teal just so it's something we can see it actually goes kind of nice with that color so we can see it's come into place and now we'll be able to play with it while we see what we're doing and then we can make you know change it afterward to be able to hide it away and ideally what we want is we actually want it to start like this and then slowly disappear away so it's revealing the characters that are underneath it and so to be able to do that what i'm going to do is come here and write key frames i'm going to write a type type uh typewriter and i would say typewriter i guess that makes sense um and we're just gonna say two and so we want this to start here and we want it to move all the way across we want this to go um to the left of one hundred percent and that means the left is gonna move away like a hundred percent away um from where it was now we shouldn't see anything yet but what we'll do now is we'll come on here and this is we just want to make sure that this is doing what we want it to animation so we'll say uh the animation we want is typewriter we want it to say last we'll just do one second for now and we'll do an ease just because why not and there so you can see as that time goes on it reveals the text that's underneath it that's a start but obviously it doesn't look great right now also one of them is it's probably a little bit too fast we don't really want it to be using an ease because we don't want to reveal it like that and the easiest thing to fix here is if we write forwards at the end it means once the animation runs it won't cover it again it doesn't go back to the starting position it stays at the end like this last part here um you will notice i didn't put a starting point i've only put an ending point on this if the starting point is the same as whatever your initial property would be anyway so like you've declared something here you don't have to declare that um in the the animation itself i learned that from jay so if you don't know jay i'll put a link to his twitter um in the description he's a css genius that does all sorts of crazy crazy crazy stuff with css so recommend you check them out the okay so if let's just watch that again we'll refresh and we can see it's revealing it that way now what we want to do is instead of doing it we can use one second actually let's just make it a little bit longer because i think one second is going to be kind of fast so we can slow it down um and instead of using an ease here and just to make it a bit easier i'm going to put this on its own line just so we can see the different things we're doing actually prettier might fix this but that's okay what we want to write here is actually write steps and then how many steps do we want it to take now this is the one thing where javascript maybe could do something that i can't do here with css and let's know how many characters i have in the text here so we just have to count them so we have one two three four 22 23 24 including the period and including all the spaces so my steps is going to be 24. let's hit save and let's watch what happens now that's kind of cool that's just cool on its own right so basically what we're saying is i want my typewriter animation so we're moving it from a left of zero to a left of a hundred percent and just in case you're wondering i'm always saying not to do animations using um positioning like the top left right i'm usually saying to use things like sk transforms with scales and stuff like that because we don't need a buttery smooth 60 frames per second animation for this it's going in steps it doesn't really matter and i think this is the easiest way to do it so that's why i'm doing it like this um so we get 24 steps and again this really depends on the the text that you have how long your name is and all of that but we can see that it is revealing everything right there and you can see it's doing one letter at a time and actually i just i just thought of something that it is possible this is sort of happening a little bit because i have a grid set up on my body and my h1 is part of that uh i'll show you a thing you see right now i broke it now um so if you're not set up in this exact situation you might run into this where you get this problem where the default is like even though my h1 has a width uh or only has 24 characters in it it's a block level element the width is wanting to stretch and what happened here is i put it in a grid just to center it on the screen but that had the consequence of it actually shrinking the size of it but what you can do to actually get that behavior by default is if you go on your h1 let's just give this an outline so we can see it outline 2 pixels solid red and so now you can see that it has that full width to it what you can do is you can give this a width of max content and hit save and now it's going to shrink to fit the content that's inside of it without breaking that content so let's open up responsive mode here and you can see that like i've set this up with a clamp on my font size so the font's changing a little bit if you don't know about this which is absolutely the best there's a card popping up where i dive into how clamp works um for big fonts and for little and for things like this i think it's absolutely wonderful so the font will shrink down it does hit a minimum size though and you will get like some overflow that can happen from it uh that's why i said shorter text will work better on this and maybe a media query that turns it off like you don't have this type of animation on small screens if you can't prevent line breaks or something like that um it might be worth it so let's go and turn this back on uh just so we can keep it in the center of my screen so just sorry about that little tangent but i think it's an important one and the big advantage with that is actually you don't have to worry about the width of your element it's this is automatic this is going to work no matter how long or short it is you don't have to guess how many pixels or whatever it is you don't have to you know we have characters now so um you could use the character units i guess but um yeah that's working right there so let's turn off that outline and so we have this that's revealing everything and it's doing it that pace so now where the real magic can happen is we want this to have the same color background as my whatever background color it's on so i have come in with a custom property here and we're going to use custom properties a bit to make this a bit more customizable but we'll do this one custom property right here let's stick it on there and now it looks like it's being typed out because the color that's covering it is the same color as the background so it looks like it's coming out awesome i'm i'm super happy with that already i think that already looks pretty cool so next thing we want to do is get the little carrot thing that's going to be blinking away so for that we'll use our after so h1 after and for this one it's going to be a little bit different obviously but we can we can keep all of this on here i think um so let's let's come on my h1 after here let's just give it a width i'm going to do a .125 m and i'm using m because i use clamp my font size could change so that means that if the width of this if the font's changing i want the width of the carrot to grow and shrink with that font size so by using m there it's going to match the font size of my h1 so it can adapt to that and we'll give it a background of black because i think that makes sense and there we go we have a carrot it's in place it's just not doing anything too fancy yet so the first thing i'm actually going to do on this is we're going to use the same animation that we already did so let's just paste that on there and let's hit save and now you can see that it's it's working and this is kind of interesting and you might be wait kevin how's it working um and basically it's following the same the exact same thing and but just because the left side of it is being pushed along even though we've set a width on it it has the the width but it also has that left so the left positioning is being pushed along at the same pace that the other one is because they both have the same speed and all that on it so i think that's kind of cool so you can see it looks like it's sort of following as it's being typed out now there is one thing here is if you want to adjust the speed now it's kind of annoying it's in two places so this is i would come up here and we could come and say that we have my type writer speed speed and let's say and it looks a little i'm gonna put six seconds we're gonna slow things down a little bit so that just means here i could use this custom property of our um let's turn word wrap on for a sec var type type writer speed and of course we want that to be in both places so this four seconds could also get replaced by that and now it gets typed out right there as well and it's looking pretty good so yeah that's a good start but obviously we just have a black line that's moving it looks a lot more realistic if it's blinking so we will have to come up with another animation here so let's come at keyframes we'll just call it blink and for this one what we'll do is we're going to say a 2 and i'm just going to switch we're going to say background is transparent and so that means it's going to go from the black color that it was to a transparent color which will cause it to blink so if you didn't know this you can put multiple animations on something so here we have my typewriter animation let's turn word wrap off just so we can see it's on one line so we have typewriter i'll just make this bigger so we can see it a little easier so we have my typewriter with that animation and then i'm going to put a comma and we'll put a second one so the second one is blink and we're going to do i'll put the same speed on it for now we'll have to change this one though type writer speed we want the same steps so steps 24 and then we'll stick with four uh let's just put forwards and then we'll adjust it as we need to uh from here now it's not going to work perfectly as it is right now but let's hit save on that and see what it looks like and of course i just broke the entire thing oh you know why why because i didn't put an s here on forwards there we go so now it is working but you can see that you see how it's fading out fading out fading out fading out and then it gets to the transparency of zero uh so we don't want that so that's where i said the speed needs to be adjusted so this is this is how fast you want it to blink basically uh so let's try like 500 milliseconds and we can just adapt it from there uh of course now actually now it's disappeared here let's just put um instead of forwards i'm going to write infinite which means it can keep going over and over again instead of stopping at the end so there we go it's blinking away and actually maybe i would make that a little bit faster 350. uh 350. that looks terrible uh maybe 500 is okay actually we'll go back up to 500 but just because i'm looking at it here and it's going really really fast but i think what would really help this is before things start that we have like it's blinking over here before the typing starts um so what i would actually do is on the typewriter one itself i'm going to come after the steps and i'm going to put one second here and if i do that here this is a delay so i'm also going to have to put that one here i'll hit save so see how it's blinking already and then it starts typing it out now i definitely got that one from pratham's tweet i was looking at why his looked better than mine and uh it just that delay at the beginning made such a big difference so i think that's a really nice start and a really nice way just to add that sort of sense of realism before it starts typing out so like let's look at that again uh save come on refresh there we go so yeah just that delay before the typing starts i think it's a really nice sense it adds a really nice sense of realism to the whole thing and even you know the speed here maybe even as i was saying before i like that better there we go i found the speed that i like now 750 is what i'm going with you can obviously adjust this and this is somewhere where you could come up and set up a whole bunch of custom properties that are what are controlling this entire thing so that is one of the beauties of it and even you could put all like i'm putting these on my root you could put all these custom properties on the um within the h1 as well and just control the entire thing here you could come in and put the delay you could even have like we have typewriter speed we could also do a type typewriter calc um typewriter characters characters so in my case i have 24 characters but if the text were ever to change we could just update this custom property so that way your steps here we could should be able to come in and say var uh type writer characters and it should still work uh so here this should be characters not speed there we go so that's still working so you could come in and that way if you have a different your text changes you just come in and update that one place and you're updating all of these at the same time so that's definitely a really really handy um a way to make it a lot more customizable you could even use javascript then to update the custom property if you wanted to um that could be one way that you could approach it as well and i guess we'd want that to be right here as well because anywhere that was using the steps if we're using the custom property makes it easier to adjust now the one thing that's really busted with it for me right now is like this comes in like this text down at the bottom here is driving me nuts and like we shouldn't see welcome to my website then it types in it should be the other way around right we should see it type in and then that comes in so we're gonna do that really nice and fast i have my subtitle that is here right there and we're just gonna come in and create a new keyframes for that let's just move all of these down i guess we can keep all of our keyframes in one spot and what we'll do is we'll come in with another one we'll do key keyframes and we'll say fade in up like that and so this one's gonna be nice and easy we're gonna go to a opacity of one and a transform translate y because y is up and down of zero and because we want it to end where like at its finishing spot and that just means that on my subtitle we can come in with an opacity of zero and then we can come in with a transform translate y and we'll just move it down like i don't know 3 ram or something like that is that up or down we'll find out in a second and then we'll come in with our animation so my animation is going to be my fade in up we'll say it's over 500 milliseconds and we'll just throw an ease on there so there it is that's way too fast so let's do that at like two seconds and we'll do a forwards with an s on there and you can see it fades in and up so ha it was down when i did that one so that's perfect it looks great except now we need it to be delayed until the typing is finished so for that one once again we can come in with a custom property because remember this number if i put it if i don't put a number here there's no delay but we saw before we can add delays to our animations so here i want to do a delay that is the length this is going to take to be typed out plus probably a little bit more so let's just start by doing now remember we did our typewriter speed was a custom property that we came up with so we can make the delay the our var uh typewriter speed right there so let's hit save and we'll watch and so as soon as this finishes it should fade up and in there we go oh it was off by a little bit oh because we had a delay remember we had a delay at the beginning of it so we need to make it plus one second to make that actually be exact but i actually want it to be a little bit longer anyway so what i'm going to do is i'm going to take this whole thing or actually it's a start here where i have my variable and we're going to do a calc and i'm going to put it on its own line and we'll say calc we'll select all of this and so we have var calc of that speed so then we're going to do plus we'll say two seconds and hit save and so now if this works it should do the whole thing and about a second afterward it should come in uh there we go and if you like this video you'd probably really like this video right here where i built a neon button with a really cool glow that came underneath that glow just makes me smile every time i put it on it blurs out like that uh if not i put another custom playlist together here as well for you to check out a really big thank you to prantom for the inspiration for this as well as my enablers of awesome zack and randy as well as all my other patrons and until next time don't forget to make your corn on the internet just a little bit more awesome why did i just wear my earphones with no audio on for this entire video i don't know but i did