 Welcome to another episode of GUI Challenges where I build interfaces my way and then I challenge you to build it your way Because with our creative minds combined We're gonna find multiple ways to solve these interfaces and expand the diversity of our skills and in today's GUI challenge We are building split text animations We're gonna split by letter and we're gonna split by word and what is your cue in that intro? The debugging corner so nice I have each of our examples I made four examples out of this technique today This first one is an animated letter example you can see it's an infinite animation and I just love highlighting this It's so cool. The browser is like, oh, did you highlight text? Let me just scale that highlight with it for you for free and looks really cool We could even go apply that to our animation if we wanted to it's all CSS driven at the end of the day Over here is the same thing split letters But we've made it so that you have to hover on them to interact with them And I like that the hovering on the whole space pushed the entire container of text back But the one that you hover on Comes back to the front and it just makes this really nice like double interaction effects And I just really like I don't know pushing things away is a really cool way to bring something into focus, right down here Is a split word animation, right? We split a paragraph of content into multiple words and now we're animating each of those infinitely with some keyframes And then over here we have another transitional focused split word animation There's a couple of things worth noting though in here I'm going to open up the dev tools go to the rendering tab and I'm going to reduce the motion and Notice the animation stops here, but that's not really the important part So I'm going to reload the page and inspect these elements here and notice it's an H1 with some text in it That's legible content if I go back to red rendering and I set this to no emulation and I reload it They're all spans. So that's not really content. That's sort of Ready for everyone and so I'm kind of gating this Dom manipulation behind a client-side JavaScript check as well as some CSS checks, right? So I'm going to make sure that Animation and motion is okay I'm also going to make sure that the device is capable of hover before I go employ any of these Techniques because look at this one down here. I'm hiding content until you hover So I've put a media query in the CSS that is conditional of hiding these Only if the device can hover so anyway kind of cool You know little notes that I thought were neat in here to keep this sort of readable by default and then we upgrade it into this fun You know whimsical experience only if it speaks if it's okay, so let's go check out the HTML and kind of uncover How a lot of this is working? Okay Well the sections here are just to center the text that's in here and to be scroll snap points But let's check out the HTML now the HTML has these attributes and values We have split by letter and letter animation breathe and the way that these are split up in my project here Is that's the split by is a JavaScript hook that's going to look at all the elements that want to be split by and then you tell the JavaScript how you want it to be split so we have split by letter split by letter These are our two split by letter examples, right? So here's the other letter example here that we're looking at And notice it says letter animation hover and I get a hover animation on each letter So that's all coming from CSS the letter animation is the CSS hook and you tell it What kind do you want and the JavaScript hook is how do you want it to be split and here's split by word Split by word if I come down here any of the ones that are split by word. So in JavaScript, yes, we're gonna start with JavaScript today I have in my index.js file imported two functions that I've created here in splitting.js This is just a little exported functions area I'm looking to see if the motion preference is set to true or false via JavaScript here We've talked about this and then if motion is okay I'm gonna go ahead and find all those split targets by looking at the presence of that attribute is there Do they want to be split by something and if they do we're gonna go through each of those elements Well, let's look at splitting.js first to see what functions are doing in here We have split by letter and split by word split by letter takes text It spreads the text into an array So it's gonna be each letter and it maps each of those letters to a span same thing with by word We're gonna grab we're gonna get past some text or we're gonna split it on space That's gonna give us an array of words and then we're gonna map each word to a span All right. Well, what does span do span takes a text String and an index it's gonna create a span element Put the text in the text area and it's gonna set the property based on that index so that we can use that to stagger And score return the node and we're pretty much ready to go manipulate the DOM Let's go manipulate the DOM for each of these elements that want to be split So for each item that wants to be split, how does it want to be split? We store the type right here We get the attribute split by and we're gonna create a little empty variable for some nodes If the type wants to be split by letter, we call our by letter function We pass it the inner text of this current node and we get back all the letters as spans if it's a word type We're gonna get back a bunch of word spans and if we got some spans back We're gonna go into this current element that we're iterating on go to its first child And we're gonna place it with all the you know all the nodes that we made and we've got words or letters in CSS marked with an index for us to reference and do some cool stuff with okay So let's go check out in the browser what some of that looks like with the dev tools And I think that's just a fun place to show you how these are working Command shift C. I love that hot key find the element that I want. Okay, let's do some inspecting We've got an animation being applied here. Hey, look, it says prefers reduce motion No preference letter animation breathe for each child span. Okay for each of these child spans They're getting this animation called breathe over 1200 milliseconds with a nice easing function Here's that easing function visualized you can change these here in dev tools, too And this is our calculation which does our delay and we're going infinite and alternate. Okay I want to also check this out in the animations panel. This is just a cool tool So if I reload it's gonna find all those keyframe animations I can select it here and grab this play head Look at this and I can drive the animation at the speed that I want and sort of inspect it and look It's even named here. Look, they're called breathe. So these are all the animations that have breathe They're offset all the way down to look the last one plays at about a second and a half Right kind of cool that I can inspect that and here's another animation that's playing down here called trampoline I think that's these ones If I scrub this I should see it. Yeah, there's the trampoline boing boing boing boing I mean, that's kind of why I named it that even though I ended up with an animation It was like much slower. So here I can click this and play it much more floaty like they're sort of really lightweight But okay, anyway, so we're looking at animated letters this is a really cool view and I just like checking it out and Let's let's go look at the CSS for a kind of how I created this. Let's let's go there next And we've done this before right. We've stashed our preference Query into a little custom media variable super cool And here is the letter animation selector. So this is sort of a way I'm doing in post-css It kind of allows me to I know this looks like a custom element selector, but I'm using it down here as an attribute So I'm wrapping it in brackets with nest and it's a little tricky But it allowed me to centralize all this stuff and I liked how it read so I'm basically like in this attribute name space Called letter animation as long as motion is okay find each of those children and set them to display inline block and give them White space break spaces. So this is like that space between animated letters here That's consuming space because of this white space style and we're now gonna look at breathe So how is breathe working? So if the attribute is matching breathe We're gonna set a glow color to white and if it's a custom color scheme or if the user prefers light We're gonna set the glow color to black, but that's kind of besides the point We're looking at each span got that animation called breathe now. This is the same code that we looked at before But let's go look at the keyframes. Here's the keyframes for breathe We are going from animation timing function ease out Did you know that you can change your animation timing functions in keyframes? Totally, and I think it made for a really nice breathing effect. That's very natural looking Alright, so then we're going to so we're going from pretty much all the default positions and default transitions and Opacities and all that sort of stuff and we're going to somewhere interesting And if we remember our animation was alternating, so we're gonna kind of bounce back and forth between these We're gonna go to scale 1.25. So that's like up 25 percent. We're gonna go translate wise negative five pixels That's like moving up just a little bit as it's scaling up and that's what gives us sort of this like stationary looking scale I don't know. I thought it looked really cool and then perspective one pixel is so that those text animations don't jiggle There's this kind of issue where if the text isn't in a very specific and custom perspective It can shift in between them. I don't know how to explain it exactly, but this essentially sets it in place Very meticulously and all the browsers go. Oh, well, then I'll just keep this text smooth I also set a text shadow on here and that glow is going in and out So we're growing and shrinking in that in that text shadow and it gives it this glow type of effect And then there's that animation timing function So we can see that in the example here for animated letters We've set some keyframes and then each of these children are using the keyframes, which is a different delay All right, we have one more example I want to go over and that's this hover me letters one if you want to learn more about these go check out the blog post There's always like more explanation and deeper dives into all this stuff in there Okay, so let's look at hover me hover me has this cool effect where like when I go into the element It pushes all of them back and then the one that I hover on comes forward Let's go see how I did that in CSS We have a hover so this is hovering on the parent element for each of those children if the hover is happening We're going to scale them down, right? Okay, so that's why when we're hovering on the element itself We target each child and scale them down still applying that perspective trick. It's about down 25 percent then for each child We're going to make sure that transition is available on a transform So if the transform changes we want to interplay it over point three seconds with an easing function We're going to set the cursor to pointer, right? This is for just each child of this animation and we're going to set the wheel change to transform and that's again So we're just like making sure that this is ready to shift through user interaction and sort of like keep that in memory browser Don't make it as like high-quality is normal rendered text We're going to be animating this so be prepared and then it says here if we're hovering on a span specifically Then the transform scale of that is up at 1.25 with again the perspective of one So it's kind of cool as we're hovering on the parent We set a downscale of on all of them But if one of them is hovered it's scaled up and that whole effect is just contained right here in this little nesting selector And it gives us just this really cool effect. I thought this turned out really nice So I hope you enjoyed this episode of gooey challenges There was a lot of like potential here And I hope you're just sort of seeing that this is a Kickstarter into something much more Dramatic that you could do there's like so much potential and tell me how you enhance it What are the sort of splitting JS functions? Do you want to write? Tell me I'm interested and I look forward to all your comments. Take it easy y'all. See ya