5.1 Animating Text

Hello and welcome back to Advanced Animation With GSAP Plugins. In this lesson, we're going to take a look at the text plugin which allows us to animate one block of text, and replace it one character at a time, with another block of text which we've defined over here in our JavaScript. And you can find the URL for the starting code pin In your course notes and so let's get started with that by forking the current pen to create our own copy of it and then we'll get started. So as you can see in our HTML, we have a simple paragraph with a button below it. So your paragraph has a class of TextChange, our button has a class of Read More. In our JavaScript, we simply have a new string of text over here which is different from the current string. So they're both nonsense Lorem Ipsum text, but we're animating from one bit of nonsense text to another bit. and let's make that happen. So, what we're going to do first of all is we're going to take a look at our settings you'll notice in the starting pen if we go to the JavaScript tag, that we have included the text plug in here so even though it does ship with tween Max once you download it if you're downloading this to your local computer or uploading it to your website, the text plugin is included with your download but again we do have to explicitly point to it with this particular plugin, so once we've pointed to it we can make this happen and this is going to be really, really easy. So after we've created a variable for our new text let's also create a couple more variables in fact let's make that our last variable. So I'm gonna nudge that down a couple lines, so our first variable is gonna be for our paragraph, so we'll just call it P. And we're gonna point to our paragraph with a class of textChange. And then I'm gonna put a comma here, because this isn't the end of our statement. We're gonna create a couple more variables. Our next variable is gonna be our button, and I'm going to call it btn. And here we're going to point to a button that has a class of read more applied to it and then a comma and then we'll have our new text variable. So we have three different variables here reporting to two different items and then for new text variable we have a new block of text that we're going to animate towards, excuse me. So let's skip a couple lines here and this is very easy as you can imagine we start the usual way by creating our animation whether it's a two animation or from animation whatever we're gonna do a two animation here and we're going to anime are paragraphs we're gonna point to our paragraph variable which we called P up here and we're going to animate it over the course of let's say five seconds and then we have our opening and closing curly brackets for our animation object. Now this isn't going to be as complicated as the bezzy a plugin or the ATTR plugin. We're not gonna have more objects embedded here. All we really need is a property called text and then we're going to put our replacement text here which we stored In this variable here called new text. So, I'll just copy that and will paste it here and we can already see that happening. We can see that it's replacing at one character at a time and if the second paragraph is shorter than the first paragraph. Then as we saw a second ago, It just kind of deletes one character at a time once the initial characters are done animating. So we can hit command Shift+5 to refresh that and watch it again. and again we see it happening one character at a time. Now it's very jumpy. It's very hard to watch at that speed. One might even slow it down a little bit just to make it last a little bit longer. But another way we can do this is we can trigger that animation whenever we click on the Read More button. So let's say we have a paragraph of text. Maybe we're putting up a post about your top ten favorite places to get ice cream or whatever, so. You could have each paragraph as a new block of text and as you click on the read more button it just animates one character at a time. So let's do that, let's move this down and let's create a click event for our read more button. So we called our button btn. So, I'm gonna do a button.click, and this is jQuery syntax, here. So button.click. And we're gonna run a function. And then inside the curly brackets for that function, we're going to run this. I'm going to cut that. And then inside the curly brackets there I'm going to paste that code and nudge it over a little bit so that it looks better and there we go so now we can wait until we actually click on that Button to trigger this animation. So, let's come down here and click on Read More and when we do we see it replacing one character at a time. Now one really cool thing here is we can replace it one word at a time if we want to by adding a delimiter. So the way we do that inside our object here after text colon newText, I'm gonna type a comma and then go to the next line. And then the property we're going to point to here is called delimiter. And we're going to put whatever delimiter character we want inside quotation marks. And I want it to be be limited by a space, so I'm going to type a space there. Now we'll quickly discover that that approach is not going to work and the reason for that is if we're using extra properties here that are associated with the text plug in then we do need to include an extra set of curly brackets. So after our text colon here, we need to handle things a little bit differently. So we're gonna put our curly brackets here. And I'll go ahead and nudge that down to the next line and put a comma at the end of it And now we need to instead of just putting text, colon, new tax we need to inside the curly brackets here say, value colon space and our new value is going to be whatever is in this new text variable. And then we're going to put our delimiter inside that as well so let's cut that and we'll paste it here. So, now, let's click on read more. And now we can see it's replacing one word at a time instead of one character at a time. Now, this isn't my favorite plugin at all, because it is really choppy, it's kind of hard to watch, and you might be able to slow it down quite a bit, maybe make it last 20 seconds or something like that. click on read more and then you know it's a little bit better but this really isn't my favorite plug in. I just wanted to show it to you because it's easy to use and it's there. But you get the basic idea now if you're interested in a more advanced really nice looking text plugin the GSAP. Platform does have another plug in but it is another premium plugin that you have to have the membership for and it is called if you go to view all products here. We have the and a lot of these are gonna be your. Let's go up here to the top and her products I'm gonna click on plugins for GSAP but a lot of these are going to be your premium plugins that require membership we can see some of these here which come with GSAP like the ones we've already talked about. But if we scroll down a little bit, trying to locate where it is and I know the Physics plugin is a really nice one as well. But again, that's another one that requires a membership. It's the Scramble Text, that's the one I was looking for. So it basically takes all of your text and kind of scrambles it. As you can see here it's a much smoother effect than what we were seeing before. So you can basically specify a set of characters that you want to use to scramble and then the text that you want to basically decrypt as it's unscrambling. So that's a really cool plugin If you're going for that specific effect, it's a little bit better, in fact it's a lot better than the plugin that we're looking at in this lesson but and in this lesson we're looking at are free plugins. But that's how you use the text plugin in green sock. So thank you for watching and I'll see you in the next lesson.