 Welcome to another episode of GUI Challenges, where I build interfaces my way, not a challenge you to do your way. With dark creative minds combined, we'll find multiple ways to solve these interfaces and expand the diversity of our skills. And on today's GUI Challenge, we're building a sci-fi-scrolling text effect. Well, here's what we're going to start working with. It's just paragraphs of text. You can't see that they've got a max width on them. That's just because we needed to be, like, not spanning the whole width of the layout here. And I like to do this to my paragraphs anyway. It's no fun reading something that goes from, like, the left edge all the way to the right edge. And there's studies that have said, like, 60 characters of reading width is optimal, or 40, or whatever it is that you find that, like, works harmoniously with your font size and your layout. But anyway, we're just going to transform this regular old set of paragraphs into something awesome. But I kind of want to read the story here. This was created by Bard as Google's AI. And I asked it to make a CSS vs JavaScript intergalactic battle. And it came up with this pretty funny story. It says, the year in 2089, the world is a very different place. The intergalactic JavaScript empire is taken over, and CSS is the only thing standing in their way. CSS, or Cascading Style Sheets, is a language used to style web pages. It's a powerful tool that can be used to create beautiful and complex designs. But it is also a weapon. It's so funny. It comes down here. It even says, like, but CSS isn't going down without a fight. A group of rebels banded together to fight the empire and led by a young woman named Sarah, who's a brilliant CSS programmer. She's determined to save the world. But they will use CSS to create a virus that will cripple the empire's computer systems. That's just funny. Anyway, the virus will be hidden in a simple website. And once it's accessed by the empire, it will spread like wildfire. The plan is risky. Blah, blah, blah. Anyway, CSS saves the world. But because it's a, you know, Bard created AI things. So of course it's going to be happy ending. Anyway, the empire will regroup and they'll come back for revenge. The rebels must be ready for them. You know, you got to have all your CSS ready for that next virus that you're going to defeat the empire with. And they must continue to fight for freedom. And they must never give up hope. All right. So we've got this story. It would be awesome if this story was told like a classic sci-fi intro. That's what we're going to do today. And we're going to do that with scroll driven animations. I'm in Chrome Canary right now. So if I go to about version. I can see I'm in Chrome Canary 114. And the scroll driven animations and stuff has been kind of behind an experimental flag in here. That's another place when you go about flags. So here I have experimental web platform features turned on as well as the view transition API and stuff like that. Because that's good stuff. All the view transition API that shipped and stable. That's good stuff too. So anyway, maybe another episode on that later. So anyway, I'm using a latest version of chromium. I'm using an experimental API to do this. It's a really fun API. And I thought it made for this really kind of cool effect here. So that's this could be challenge. We're building this sci-fi text effect off of this basic text. Now, one of the things we want to do too is only, you know, heavily manipulate this text and do this cool sci-fi effect. If the user is okay with motion. And we're going to check for support for scroll driven animations before we use it. So let's start checking it out. And first we'll look at our HTML. We've just got an article with a bunch of paragraphs. But there is this cover viewport class. So this is part of the trickery that we have to do because we don't actually want to scroll our content. We want to fix our content into the viewport here in the center and then make it look like it's traveling off into the distance when the user scrolls. So we're going to link the page scroll to an animation that translates an element in three dimensions, you know, vanishing into the distance or coming into the forefront. And so with that foundational information and that background on what we're going to do, let's dig in at some CSS. I can just kind of see a general outline of how this all works. So here I am in my sci-fi scroll CSS file. I've got an animation to find here at the top and we'll go in and debug some of that soon. But let's get started with some of our essentials. So one of the first things is it's pretty annoying that our text is over here on the left edge. So let's put that in the center with, we'll target our cover viewport div that we had. We'll set it to display grid and we'll place the content in the center and we can see we have our content placed in the center. Excellent, that's a great step one. Now the other thing you notice, we don't have a whole lot of scrolling runway, which means if we wanted to turn this into a vanishing animation, we only have that little bit of a wiggle room. So we're going to set the body to be min block size 300 viewport height. And that's going to give us some scroll runway to work with. So then the next thing you want to do is we're going to check for at supports of animation timeline scroll route. So animation timeline is your ability to instead of have an animation be powered by the screen refresh rate, right? That's why something goes so smoothly from point A to point B. Since it's using the refresh rate of the browser to do that. We're going to set that timeline to be an animation timeline that targets a scroller. And in this case, we're targeting the route scroller, which is the page scroller here. So we're essentially saying we want to animate something based on the scroll position here. We can see that we're about halfway through our animation. We're halfway through the scroll and we're going to map that to an animation. And that's what the animation timeline lets us do. And you can target different scrollers with this keyword here. But right here, we're targeting the route one. And we're also going to say if the user has a prefers media like reduced motion, if they don't have any preference, meaning that they don't exclusively not want to see it, I know double negatives are annoying, but this is pretty much saying it's okay for us to do some motion. This user hasn't expressed any particular needs around motion. Well then cool. So we're going to target that viewport element. We're going to set it to position fixed. We're going to inset zero. And then we're going to set the perspective to 50. And we can really the perspective isn't important yet. So I'm just going to hit save. And we don't really see a difference because our content was already spanning the entire viewport. But what we've done is we've made it fixed inside of the viewport. So as we scroll, look, it doesn't move anymore. And that's crucial because we want the animation to be what's active here, not a scroll interaction. So we're going to take that scroll interaction that looks like it's doing nothing. And we're going to map it into an animation. The perspective is what's going to have us be in three dimensions as we get in there in a second. Okay, so now we have an article full of paragraphs and that containing element, that article element. Let's bring that in. The block size is set to 75%. Well here, let's just comment that out for now and look at the kind of essentials here. So if I hit save, we can immediately see that what I've done is set an animation for one second. The time doesn't really matter because time is sort of irrelevant in a concept of like a scroll timeline. The scroll position is more relevant in terms of like duration. We're going to set it to linear so that there's a one-to-one mapping between when I scroll and the results that we see in our animation. I'm going to target those keyframes that I made up here called keyframes sci-fi from Intusa to 0% and 100% essentially. And we'll go over that in a second and we set it to forwards, which I don't really think matters. Let's get rid of that and see if we get the exact same result. We do. So I'm going to get rid of that and commit that into my repo. Look at that. We're fixing little unnecessary bugs. Well, it's not a bug. It's just we're reducing the amount of complex surface area of this effect. Anyway, okay. So then here's the kicker though. We've got this animation timeline scroll route. And look, my editor doesn't even know what's going on. It's like, what's an animation timeline? What's the scroll function? And why are you passing it the word root? What does this all mean? And well, it just means we want the timeline for this animation that's running to be the like we were describing earlier attached to the amount of progress that the scroller has. So scroll progress will equate to the amount of time that has passed inside of an animation. So as I scroll, like I scroll down, it's going to progress through the animation. And if I scroll back up, it's going to reverse the animation. So we kind of get both directions for free by tying something to animation. It's super cool. So then why did I block size 75%? Well, let's see. It just kind of zooms the text up a little bit. And I liked it when the text was kind of coming in fully out of the bottom here. It just, I don't know, is more reminiscent of the effect. Plus it kind of filled the space made it easier to read. I just thought it looked nice. So that is why I have block size 75% here. And here's the crutch of the animation. And then we're looking at these keyframes going, OK, Adam, why'd you do transform rotate 45 degrees? And then you translated why 100 VH? And then you're going to go to negative 500 VH. What is going on here? And that's because if you look as I scroll out and out and out, that's 500 VH. I could even make it 1000 VH and it would be even tinier. But I felt like that was tiny enough to feel like it had vanished off into the galaxy. What I want to do really quicker is let me double click. Let's inspect because it's fun to play with positions. So let's get rid of the animation. So now we're back into a state that isn't transformed in 3D. And let's make one. Transform. We're going to rotate 45 degrees, right? That was one of the things we did. And then we also translated Y into 100 VH. Well, here, let's just knock that down. Oh, it looks like our rotate was X. Yes, we have rotate X. And so what's cool is we get a couple of, like, fun dev tools that we can use here. So the first one is we have this rotation tool. I can pop it open. Oh, let me click and pop it open. And I can change the amount of tilt that's on our effect here, which is, oh, let's go like this. What does this look like? Oh, we haven't hooked it up to the animation. Anyway, so this is essentially though how I measured and got to the value that I was looking for. So I was like, oh, I think 45 degrees is pretty good. And this is how you can adjust it. So in case you wanted to tweak or twist the result, you can do it there. And the other thing that we can do here is if you see, I get a little cursor here that's like a left and a right arrow over top of my 30 VH. And I can pull this left and right just like I'm in Figma. And I can see the animation. Well, I was able to pre-plan the animation by just writing the transform, deciding and finding what rotation X looked good, and then looking at what translate Ys looked good. And so the first thing I wanted to do is I wanted it to start out of the viewport. And so that's why we started translate Y 100%. And then I was like, okay, well, what about the out state? The out state looks good over here somewhere. Look, it just keeps going. Okay, we'll go back to something more reasonable. Anyway, so if you're wondering how I came up with those keyframes, that was the way I did it. And we shrink this back up and close out of DevTools. Thank you DevTools, that was very helpful. And I'll save and I'll just scroll to the top and refresh. And we got ourselves back into our scrolling scenario. So that is the essentials of this GUI challenge. I wanted to introduce you to scrolling to animations where we attach the time of an animation to a scroller's progress. And they kind of do a decently cool little effect where we go from a translate Y 100 so it's out of the viewport. And then by the end of the scrolling position, see I'm all the way down at the bottom, we're going to reach this translate Y of negative 500 VH. And we get this really cool effect that tells us a sci-fi CSS story. Anyway, I hope you liked this GUI challenge. And I'll see you on the next one, y'all. Take it easy.