Animated Text Reveal Tutorial

Key Takeaways

hello everybody welcome to this week's CSS challenge video and this week we're going to be creating this animated text reveal on the right side of the screen here which is perfect for showing large headings in an eye-popping way on page load or when a user Scrolls down to it to get started let's open up our index.html page to view what we have started as you can see we have a nice background image and that's all we have for now which is perfect so let's start adding the HTML that we're going to need for this project the HTML is really straightforward all we need is one set of text for the class we'll just call it reveal text since is the text you'll be revealing and in here we'll just put the text we want to reveal if we save that you'll see we now have our text on the right-hand side here which is perfect now we can jump into our styled us CSS over here and start styling the actual text the first thing we want to do is select this text and make it a little bit larger so we'll just increase the font size to let's say 70 M we also want to make it bolder so we'll change the font weight here to be nine hundred which is about as bold as you can get and we'll save that there we go we now have a large bolded font right here now you may think the next thing we should do is change the text color to be white and then hide the show part of it as we go that's a lot harder in CSS than what we are going to do what we're gonna do actually is make the text transparent here and then we want to add a background that is going to show on this text so let's do background image and this background image I have right here is just a single white pixel and we're just going to use URL to select that and it's called a reveal background and if you save that you see now we have this white background but what we want to do is we want to make us about the white background only shows where the text is actually at what we're going to use is a property called background clip in order to say where do we want the background to show and we'll say we only wanted to show that the text if you save that you'll see nothing actually happens and you're thinking okay why is that and that's because some browsers don't actually support all properties and you need to use a browser prefix in order to support that property so we'll go up here and we'll add WebKit background clip and we'll say text here have you say that you'll now see that the background only shows where the text is at and that's because this version of Google Chrome I have here does not support background clip for the value text and we have to use the WebKit background prefix in order to use this and when you do this you always want to make sure that you put the prefixed values above the actual values since CSS will work from the top down and if your browser supports this natively you want this to be the last property that's used as opposed to the prefixed version up here now if you remember from our animation over here you'll see that we have a bar moving up and down revealing the text as it goes in order to make that happen over here we want to use as a property called background repeat' and we only want to repeat on the X access have you saved that you'll notice our background actually completely disappears and that's because it's slightly above our text so if we comment out the showing it only on the text and say that you see we have a single pixel line of our background right here above our text which is exactly what we want now we can come with that back in save it and what we want to do is we want to add an animation to our property in order to animate that bar up and down and make it a little bit larger and change the size as we go so let's go down here add our keyframes in for animation we'll just call it reveal background since it's animating the background for our reveal text and we'll start with what we want it to look like that 0% so at the very beginning of our animation we want the background size to be zero pixels we don't actually want any background at all and then we also want the position of our background the Y position precisely to be at 0% so it'll be at the very top of our text and then we can move on to our next section so at 10% here what do we want it to be and if we look back at our animation over here at the beginning you'll notice it pauses a little bit the top moves down and then pauses at the bottom so we want a slight pause at the top that's what we want to do so we'll go in here we'll use background size set it to 30 pixels so our background gets slightly larger and then we'll use the background position of Y and keep it at 0% so that it doesn't actually go anywhere which is exactly what we want that's perfect and now we can move on to the next part of our animation as you can see over here it moves down the bottom and then pauses there so let's work on the downward part of our animation so we'll go 35% here and all we need to do is just change the background position of the Y to 100% so it'll be at the very bottom of the text then we want our animation to pause right here so we'll just say also do the exact same thing at 45% so now it'll pause at the bottom so now we have our animation starting at the top pausing for a little bit moving down to the bottom pausing for a little bit and now we just need to move our animation back to the top again so in order to do that we'll go over here we'll say at 70% we want our animation to move back to the very top so we'll use background position Y right here and we'll set that to 0% so now our animation will move back to the top and then lastly our animation once it gets to the very top just fills in all the sides so our background size increases so what we need to do right here is that 100% we just want to increase our background size make it 200 pixels and there we go that's our entire animation complete except for one step we need to set our background size here to be 30 pixels and that's because otherwise our animation from 10% all the way to 100% will slowly increase the background size but we only wanted to increase between 70% and 100% so we tell it where to start at 70% and where to end at 100% so now let's add that animation to our reveal text I'll say animation we want to give it the name which is reveal background we'll say the last two seconds you want ease in out as our animation speed and we'll just put it on infinite for now so we can view how it goes and if we say that you see we have our text pausing at the top moving down to the bottom moving back up and then filling in completely which is exactly what we want so now let's turn our animation off of infinite if we save that you see that our text goes fills up but it completely disappears here which is not what we want and that's because animation by default reverts to whatever the properties in your class are at the end of the animation and we want our animation to take on whatever properties are in 100% at the end of the animation so in here we'll say animation direction or fill mode sorry and we'll set this to four words which means the animation will take all the properties from the last keyframe and save it into this so if we save that we now see that our text goes stays completely filled in and that's because we use the fill mode afford which means it keeps the background size of 200 pixels at the end of the animation as opposed to reverting back to zero and this is all there is to creating this animation if we save our page again we can see the animation run through again and it looks really nice but you remember we use this prefix up here in order to support this text property but what if you get a browser that doesn't support this WebKit background or this background clip so what if for example neither these properties worked what is our animation look like now if we save it you'll see this is ugly this is not what we want so what we want to do is we need to use a property of CSS called supports in order to say to test to see if the browser actually supports these two properties here before we do our animation so we'll go in here and we'll say supports WebKit background clip for the value of text or if it supports the background clip property for text then we want to put all of our animation background code into here so say reveal text as our selector and in here we want to put all of our code for animation just like that so now if our browser supports these properties it'll render what's in here but if it does not it'll render is in here so for example if we wanted to emulate a browser that does not support background clip we will just comment it out and save it and you'll see now we just have black text so we can change that color in here to be white so now if we don't support this background property we'll have this white text right here and if we recom in this back into place put these properties back in and we have a browser that does support back on clip and we save it you see that we now get the animation that we want and again browser does not support it will just get plain white text which is fine so now we have a foolproof way of showing this title for browsers that are older and don't support WebKit background clip text or background clip text and for the newer browsers that do support it will get this nice reveal animation whenever our page loads and that is all that you need to know to create this reveal animation on the right here I have all this code available on my github for you to download locally or you can view it on my code pen page in order to tweak it right in the browser without having to download anything so if you guys did enjoy this please leave a like and let me know down in the comments below what CSS challenge you want me to complete in the future thank you guys very much for watching have a good