 Hi there my friend and friends. My editor saw this site the other day and see this text scroll thing going on there as we go down and see this on other websites, but he sent it to me because he noticed it and he said, Kevin, I think this would make a pretty interesting video. And yeah, I actually, I think so too. So here we are today. And I'm doing this video as a little bit of a different one though you might have seen me do other ones like this one, because we're going to be doing it as a can I clone this that is completely unplanned to see if I can pull it off because I think I can do this with CSS only. So we're going to see if I can do it. It's we're going to share my thought process along the way trying to debug things figure things out and get to this type of solution. And see if I actually have to resort to using JavaScript, which I'd really prefer not to because these things usually you see for like third party JavaScript plugins and stuff. And so we're actually starting off. You can see I've done a little bit of work because I've recreated their website, even though I cheated a little bit at this bottom part, but I've copied their website. But you can see I don't have the scroll animation here and all that we're going to be basing this on I think this is what we need where we have a scroll reveal with a section title and the paragraph here. And the first thing we need to do is get a gradient background on there. I think that's how we're going to do it. And I have to remember how to do a gradient background. Basically, I've done it in the past, but it's not something I do on text very often. So we're going to try our best and see where we go from here. So the first thing I'm going to do is I just want to get this h2 and this paragraph and we're going to style them up. So I guess I could just I'm going to keep like this is just general styling for font sizes and other stuff and the other parts of the layout that are going on. So I'm going to leave that sort of on its own and we'll do this demo stuff that's really important for getting this to work here. So I'm going to select everything that's inside that scroll reveal so that section with these two things that we have there. And let's start by doing the color on those things as HSL. And the reason I'm doing HSL is it's easy to get white 0% 100% means white, but then I can do like a 0.2 or something. And you can see it gives us a great outlook, which is sort of what we want, right? If we look back at the original one. Before anything comes in there, it is it's pretty faded out. So we want to be faded out. We want this to have a background color to and or gradient as I said. So just to make it really obvious instead of using white for now, I am going to do a background image, which is a linear gradient. And we're going to do red to blue because by doing it this way, it's going to be more obvious sort of what's happening. So you can see the gradient is coming in on both, but we don't want it up and down. So we can that's the easy one to fix 90 degrees and it goes sideways. And the trick here is to use a background clip of text. And there we go. Kind of cool, right? And now our gradient goes inside the text and what my idea right now is what we want is to control the background position. So as we're scrolling, the background position will sort of like reveal itself slowly because if we come here, let's I'll just show you if we do a background position. No, not background position background size position wouldn't really change much. I don't think let's do a 50% 100%. And you can see the gradient is going starting like here and it's going to the 50% point. And so then the other thing we can do is a background repeat. I remembered how this works. I'm pretty proud of myself background repeat of no repeat. And then we get it stopping there. So the idea is this number, if this number is changing, right? So let's just make it so we can see it a little bit better. If that number is changing, it's going to like we can slowly reveal as it's going through. And I see a bit of a problem that right now and I don't remember how to fix it. But we're going to figure that out after because right now it's doing all the lines at the same time. But let's come and create a at animation that I do this so often. I did it the other day at any animation. Instead of an at keyframes, I do it all the time at keyframes and we're going to call it we'll call it text reveal scroll to scroll reveal scroll reveal. Just because I tend to like getting my keyframes for these things named is the same class that I have. And all we're going to do is say a two and this is the same as 100%. You're going to this point, the end of the animation is this. We want it to be a background size of 100%, 100%. And then this is where the magic comes in. And we're going to do animation is my scroll reveal. And we're just going to say linear because it's always weird if you don't say it's linear. And then we're going to say that we might want to forwards on there as well or words. Just because if you don't have the forwards on it when it gets to the end of the animation, it sort of it just disappears and it goes back to this point. So forwards make sure when you get to the last keyframe, it stays at the last keyframe animation scroll reveal linear forwards. And then we want the animation timeline to use view. We're probably going to have to change that a little bit. But now it should be. All right. It's cool. I actually kind of like it with the gradient to be honest. I don't know if we just did this as zero because then the color of the gradient will be a bit brighter. So it's kind of cool, but it's not what I want because I want it to go one line at a time, which means we need it. Actually, I have two problems. I wanted to be one line at a time, but this is two different elements. So I'm not sure how we can get it to work with two different elements and time it properly. That's going to be interesting, but I am kind of I mean, it's kind of it's interesting already what we have. Right. But it's it's not exactly what we need. I'm trying to think of how I've done this in the past. So if I wanted to go line by line, we need it to be. I wonder display in line. Oh, no, that's not good. Well, see there and see how it's that that's the reason I wanted to use in line is because the times I've done this actually. I've used it most often on links and on a link. I've used it as actually like an underlying thing that sort of grows and you can do it across multiple lines. I've done shorts on that. I've talked about it quite a bit. So the in line made sense there. That doesn't work though. Okay. So if we can't do in line, but we need it. Okay. We need them to be in line, but we can't make the age two in the paragraph in line, which means we need in line elements in here. So let's just take you and wrap with a span and then do the same thing here. We'll grab all the content inside of there and wrap with a span. If you don't know what I did there, I'm selecting control shift P if you're on a Mac command shift P opens the command palette. I'm going to put it wrap and you should see I met wrap with abbreviation. I have another custom keyboard shortcut set up for it, but I always forget what it is. Okay. So that means instead, could this just be on my spans then? Apparently not. Why not? Why does that not work on my span? I don't understand. Oh, the spans not a direct child. Cool. Okay. So that's better, but it's still busted. One of the problems is I think we need to have a separate animation for the title and for the paragraph. Just because they're starting and they're both going to finish at the same time. The other thing, let's just put in contain here, which the default is the animations going to start as soon as the element enters the viewport. It's going to be finished as soon as it exits the viewport. If I do a contain, which we're probably going to modify, but if we do a contain, what that means is it's the animation. Oh, no, I broke it. Why? Oh, no. Whoops. That doesn't, it's here. Animation range is contained. Okay. That's better. You can put numbers and stuff in here and I always mix it up with the animation range. This means that the animation starts when the element is inside the viewport and are the entire element. So the entire h2 or the entire paragraph is going to be inside that are the spans in this case. We'll start it and then it's going to be finished as soon as it reaches like this point. Right. So this one's finished here and then that one would finish as soon as that entire span is in the viewport, which I can't even get to. We'll fix that because we needed to finish probably about here. Let's just put this back to the point too so we can see the text all the time. Okay. So this we can keep the same, but I think these two will take off and I'm going to say my scroll reveal. Actually, know what we'll do. Okay. What I'm thinking, what I don't like doing is say I do my scroll reveal and then I'm going to have like h2 span. Right. This just gets annoying when you have to do selectors like this. So my thinking here and I'm wondering if I can even not this I need to all basically have there. But what I'd like to do ideally, I'm trying to think if I can do this with custom properties and make it a little bit better, but scroll reveal, we can always fix things up. Don't if you're trying to solve something like this and you're not 100% sure on the best way to approach it, don't try and optimize your code at the beginning to see if it works. And then if it does work, then you can worry about optimizing things. Right. I'm going to do my h2 span and we'll live by my own advice here. And then let's duplicate that. And then this one would be my paragraph span. Again, maybe not the cleanest code, but that's okay. Because then if we take these off of here and actually the view could probably stay up there. Yeah, the view could stay there because I don't think I'm going to change that. So actually, I'm moving this lineup, but we just don't need it. Because here what we could do is animation contain. Do I even want to do the, let's just try 100 pixels offset and I'll do a 200 pixel offset here just for fun. No. We want that one to start. I want that one to be finished. This is this one. Can I use viewports here? I've done percentages. Can I do like 80 VH and then it's finished? I know that's, oh, yeah. Okay, that's wrong. Because it's going to do the whole animation there. Is it entry range? Let's just do start 20. Okay, so it's going to start when it's 20% of the way in. And then we're going to do an animation range and range and is contain 30 viewport height. Let's just see if that works. So it starts at 20 and then it's finished when we get to 30. The reason I want to do that is because now I'm saying like, this is where it's starting. This is where it's finishing. So it's starting 20 VH from the bottom of the screen. It's finishing 38 VH from the bottom of the screen. But knowing this means I can take, let's just copy that. I want this one to start at 30 and maybe it's longer. So maybe we go up to 50. Is that actually going to work for the timing? Oh, it doesn't work. Why not? Oh, wait, I'm using contain. So contain means the entire thing has to be visible. So it's starting too late because it's waiting for like the bottom of this to be. So can I do this one as cover instead cover means as soon as you enter the viewport. Maybe I'd want both to be on cover, but let's see. It's still not working. I was really hoping this number in this number could line up for the end in the start and then it would cause it for there to be no delay. Oh, maybe it's because I need to cover. Let's just do all of them as cover and see what happens because then it's, I guess, more consistent because it's a suit. It's 20. Come on, time it. Oh, no, it's I thought the last letter there was supposed to be a G. It looked like a cutoff G. It's still not timing it, right? This just might mean we need magic numbers. Well, how's this? I know my thing is going to work here, which is encouraging. And my plan is working. And see, I find the speed of this animation is actually nicer than the one that they had because I find theirs just goes so fast. That's like filling up. I think on mobile where I first saw it because, as I said, my editor shared it to me on Discord. It looked nicer on mobile on the computer. I find it goes really fast. I find this actually looks better. Maybe it's because it has the gradient, but we're going to take the gradient off in a second just to show how we can actually make that work because that's the easy part. How do we... Okay, let's just do this. I hate this. There must be something I'm doing wrong here. Basically, as soon as we hit that, I want the other one to start and there's still a delay. I'm just going to put 20 on that one too. I don't... Oh, maybe 20 would be right. No, no, no, it doesn't make sense. I was like, no, I'm a magic number in my way there. These could be in pixels too. It really doesn't have to be VH, but it's just an offset. 21. I hate magic numbers. 23. It's probably like a 22.5 or something here. Is that okay? That's not bad. I guess, as I said, the 22.5 could probably make the timing of it. So as soon as it gets there, that's better. It's very magic numbery though. If you change the font sizes, it would probably muck these things up. I'm wondering if there's a better way to do it. But whatever, at least it's working. The end here, I could also change, but I think the speed is okay. It means once the whole thing is about 50% of the way... Actually, it's once the top, I think, is at 50% of the viewport, because I'm using cover. Right? Yeah, so this is probably about 50%. We're getting that. I could also change that to a contain, and then it would be once the entire thing is at about 50%. If I do that though, I find the speed of that one goes faster than that one. It's probably not the end of the world, but I think it's better. You could play around with this, obviously, and change where it's set up, but I think it's better that we have the whole thing filled up sooner rather than later. Wow, it worked! Cool, so I'm really happy with that. I wasn't sure if it would be harder or easy, but it's not too bad. And then to fix this, we just say white and white. And that means... Look at that. And the nice thing with this, then, is you're just playing around. Now, the one thing I don't know, the background... Because there was another way you had to make your text transparent. So I'm glad this actually worked like that, because I didn't remember what the other property was. So that's pretty cool. And right now, scroll timeline isn't supported in all browsers. So if you did this in Firefox, you just wouldn't have a reveal or a Safari. I think for it to work properly, it is behind a flag in Firefox, and I think you have to put the axis that you're on. So the timeline for view is my y-axis. So I think you just need to do that. And then with the flag, it would work. And there is a polyfill that you can use. So we could test this out with the polyfill too. But my main thing is I wanted to see if it was possible with CSS only. And this is probably my fastest video that I've ever done like this. And I think it looks pretty cool. I like it a lot. I think it looks nice. These effects are always kind of fun. And to be able to do it with just a few lines of CSS is just incredible. So if you'd actually like to learn more about how this view thing with the cover and the contain and all of that that I was doing and other options, because right now I'm looking at the view, but you can also look at scrolling through the entire viewport and not just focus on one section of the viewport. And if you want, you just want to learn more about that. As I said, I have been doing a lot with that lately. And I did a complete deep dive on how all of this works when you can see that in the video that is right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome who are Web on Demand, Andrew, Simon, Tim and Johnny, as well as all of my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.