2.7 CSS3 Motion Typography

Hi and welcome back to 10CSS3 branding and presentation projects. In this project, we're gonna be creating some motion typography. To get started, you can fork this space pen by looking in the related link section below this video. Going to the base pen there and forking it into your Codepen account. And the way we're gonna approach this is to break the code into six parts. So start out by adding the HTML for the first part of our quote. Now we've created a div with a unique ID. We've also used the class part which we'll use to give some common styling to every element of our topography. And then for each of the words that make up this part, we have wrapped them in a span tag, and that will let us individually target those words. Let's add in some styling that's gonna affect that part clause and all of the spans within it. Now, you can see that the words that we added to the screen just a minute ago are now gone, because we have set opacity to zero as the default for all of the span tags in our HTML. Now, the wrapper that we're working inside already has a fixed width of 800 pixels and a height of 480. That's giving us this white stage area here. So for our part class, we've set the position to absolute, and we've set the top, left, bottom, and right positions to zero, and that makes sure that every part of our animation will have this full stage space to work within. And you'll notice on both of the sets of styling that we just added in, we've used animation film mode both. Now animation film mode set to both means that whatever the starting state of the animations on any of our spans is, it's going to keep that span in that starting state. So let's say we have one span that's pushed off to the left side of the screen out of view. Having animation-fill-mode: both means that throughout the period of time between when the slide is first loaded and when their animation starts, it's gonna keep that word off to the side. It also means that once that animation has finished running, it's gonna keep the animated element in its final position. So that prevents you from animating a word in to the right place and then having it disappear again once the animation is finished. Now before we start animating in each of the words in our first part, we want to set up the sizes and the positions that they're gonna end up with when each of their animations is finished. So in order to do that, we're gonna temporarily make each one of these spans visible again so that we can see each of these words as we're moving them where we want them to be. We'll position the first two words, it will. So there's our first two words. Now we've just worked out the left and top positions for these. We've given them the same top position, so they'll be on the same level, and we've just given them different left positions. So we have our it here and will here. And you'll notice we're using nth of tag, and this is how we're gonna tag it, each one of our spans. So by saying nth of type one we target our first span, nth of type two we target our second span, and so on until we have positioned each one of the spans inside this part. Now we'll start with our third word, and there we have soon. Now, we've used the left and top position again, but this time, we've increased the font size and we've italicized the text, and now we just have two more words for this part. We have be possible. Now with be, we've just left it at the default font size and set the left and top positions. And then for possible, we have increased the font size even bigger and also changed the font weight. So that's the full layout for our first part. Now we're ready to animate each of those words. Now we're gonna create a few generic animations all at once that we can then deploy on many different words that we use in our animation. So we're gonna add in these. All right, so we've made a fade in animation that will take a word from being invisible up to opacity one. We've got slide in from left. It will give it opacity of one from the beginning. It will set it off to the side so that it can't be seen, and then it will allow it to come back to its natural point. Then we've created an equivalent animation, this time instead of sliding in from the left, we're sliding in from the top. So, once more we have set its opacity to one from the beginning, so it's visible. And this time, we've started it out negative 30 rems above the top of the white stage area. So, when the animation finishes, it'll bring it back to its natural position, sliding it in from the top. Now we've done the same thing again with slide from the right and slide from the bottom. And then the last one that we've set up is a stamp animation. So, this time we're starting it out still leaving it at zero opacity and we're starting it scaled up five times bigger than its usual size. So, five times its usual width and five times its usual height. And then, as we fade it up to full opacity, we also scale it down to its normal height and width. So that will give the effect of the words stamping itself onto the page. Now we're gonna set each one of the words in this first part to use one of the animations that we've just set up. So we're gonna have the first word use the fade in animation over half a second. We're gonna have the second word also use the fade in animation over half a second. The third word with use the slide in from left animation, also over half a second. The fourth word will use slide in from top, and the fifth word will use the stamp animation, this time running over 0.4 seconds. So you can see all of our animations are already running, so we're starting to get that motion typography look. But we don't want all the animations to run at the same time. We wanna stagger their animations. We want each word to appear in the order that they would be read in the sentence. So for each one of these words, we're gonna add the property AnimationDelay. We'll delay the first word by one second. We'll delay the second word by 1.4 seconds. That means that it's gonna appear 0.4 seconds after the first animation. We'll set the third word to have a delay of 1.6 seconds, so that's 0.2 seconds after the word before it. The fourth word will have 2.3 seconds, and the fifth word will have 3.2 seconds. Now let's see our whole animation for our first part. There we go. Pretty cool, right? Now, you can set for yourself whatever you think the appropriate delays and durations are, as you're creating your own motion typography doing this. All right, now let's carry on to the next part. And in order to do that, we need to get all of the words that we have on the screen right now off the screen. So we need to do an animation to get part one out of the stage. So we're gonna add another key frame animation called part one out. This animation has a few stages to it, but basically what it's gonna do is tip the whole part up on its side and then slide it off to the left. So we'll apply that to the ID one that our first part is using. And now when the first part's animation is finished, up on the side, off to the left. Now we'll add in the HTML for the second part of the quote. And you'll notice we've gotten little brackets here. We're gonna be using those to create a little animated wireless symbol. Now, you might notice some cuts from here on in as you're watching the animation, because I don't wanna make you have to keep watching the same thing over and over, so I'll be doing some edits to skip you forward. Now, we're gonna add in some extra animations that part two will be using. So we've got hinge in, which is gonna make a word appear as though it has swung in on a hinge. We have grow from left, which is gonna make a word appear like it's growing in size with the starting point on the left end of the word. We've got emerge, which is basically the opposite of our stamp animation. And then we've set up an animation to use on part two out, when we get the part two words out of the stage when the animation's finished. Now, you already saw when we put together part one, the process that you need to follow when you're building out these parts. You need to get all the positioning right for each of your words, get the size and the layout just how you want it, then add in the animations you wanna use, and the durations and delays that they should have. So, we're gonna do all of the code at once for part two. You can watch the animation and then I'll just point out any key elements in the code for part two that you need to be aware of. So add in our CSS. So there's our part two animation. Now the code we use is mostly no different to the code that you added for part one, but there a couple of points of note. Firstly, when we're using the hinge in animation, we're also needing to set a transform origin on the word that we're using it with. Because in order for that hinge in to look like it's actually swinging off a point like a corner, it needs to have a transform origin that's set other than the middle. Without this transform origin, the word will just look like it's spinning on the spot. The next thing is with the grow from left animation, you need to have overflow hidden. The grow from left animation works by gradually expanding the width, and we have to make sure that the parts of the word that are outside the current width at any point in the animation are not visible. We don't wanna be able to see that full word until the grow from left animation has brought the width back up to it's full width. Now in part three, we're doing something a bit interesting, and I wanna show you this by itself before we put in any animations. So I'm just gonna temporarily comment out the parts that we've put in so far and we'll add in the HTML for part three. And then I'm gonna add in just the positioning code for this part. So you don't have to follow this part. You'll be able to put in all the code for this section in a little bit, including the animation. And what we've done here is create a curved text effect. And the way that we've done that is by putting an extra span around each individual letter so that we can position it so that it looks like it's curving. So then just like we've used nth of type to drill down and tag at each individual span in our parts, we've done the same thing with each of these letters. We have a class named around put around the word here, and then we're nth-of-type to target each of the spans that we have nested within. And then we're setting the positioning and the transform on every letter to position them where we want them to be to give them a curved effect. So this is just to show you how you can drill down even into individual letters when you're doing motion typography in this way. Okay, so we'll just remove that CSS, cuz you can put it all back in properly in a second, and we'll uncommit the parts that we have so far. And now we're gonna add in all the rest of the animations that we're gonna be using in this typography piece. We're adding in a half spin. We're gonna use that half spin on our curved words to make them look like they're orbiting that word the in the center. And then we've got the out animations for part three, part four, and part five. Let's add our part three CSS back in this time with the animations included. So, there's our part three animation. We'll add the HTML for part four, and we'll add in all the CSS for part four, and this is all just using animations that you've already defined. And finally we'll drop in the HTML for the last two parts, parts five and six, at the same time, and to go with that, we'll drop in the last of our CSS. Now there's nothing different at all about this CSS. It's the exact same type of code that we've used so far in each of our parts, and used the exact same build technique. So let's add this CSS and then we'll watch the whole motion topography animation from start to finish. How cool is that? Now normally you would have to get into some fully fledged video code to do any type of motion typography, but this is a way that you can take your web design skills and use it to create something that's traditionally outside of the field of web design. Now a hint if you would like to try putting something together with a different quote is that Adobe Edge Reflow can be really, really helpful for deciding how you wanna map out your words. And then it will tell you what positions to use for your top and your left values. This is a perfect project for you take and apply to something brand new and fresh of your own, a quote that you personally love. And as ever, we would love to see what you create, so please tweet us your completed pens through to #10CSS3projects. In the next project, we're gonna be creating a horizontally scrolling picture book. We're gonna use CSS only to generate a smooth scrolling effect that's gonna take us from one page to the next. I'll see you in the next project.