Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Specifying Options With JavaScript

Moving forward, in this lesson you will continue to explore the Textillate library as you use JavaScript instead of data attributes to create your animations.

Relevant Links

3.5 Specifying Options With JavaScript

Hello and welcome back. In this lesson, we're going to take our discussion of Textillate.js a little bit further as we talk about how to create our animations using JavaScript instead of using the data attributes that we talked about in the last lesson. So, I've put together another file here. As you can see, we've got two headings right on top of each other. And they've both been styled and colored and all that good stuff we've already applied in our JavaScript, the Textillate method to each of those, and inner CSS I've positioned those to be right on top of each other. So what I wanna do is I want to animate one of them and then whenever I click on the next button. I'm gonna animate that off and then animate the next one on. And so we're gonna talk about how we can do that in JavaScript. So I'm gonna start by jumping into our CSS. And then for our h2's, I'm gonna set our visibility to hidden. That way we don't have any accidental flashes of unstyled content or anything like that. And, actually before we do that, let me get rid of that and save our file, so that we can fork it and create a new copy. So the URL for this particular starting pen can be found in your course notes. And then once you find it, go ahead and click on fork to create your own copy. And then we can go in and do what we have mentioned. So let's, first of all, refresh our page to make sure everything still works fine. And we see that both of those animate and at the same time using the default animation. So, again, I'm going to go into our h2 class here and set visibility to hidden and if we were to reload this now, wait I'm gonna cancel that. I wanna reload just the frame not the whole page and it's not loading so we might have to load the whole page. So make sure you save it and then refresh the whole page and there we go. So our animation is still happening so that visibility hidden is just to get rid of any potential FOUCs as we've discussed before. And then in our JavaScript we'll create our first animation. Now our first animation is going to be applied to the title one which is the very first one. And inside the textillate parenthesis here in order to create a series of properties, in order to create our animation this way, we need to create an object. So we're going to create an opening and closing curly bracket inside those parentheses, and we'll just nudge that closing curly bracket and closing parenthesis down a couple of lines. And then we wanna create our in effect, the initial animation. And the way we do that is we type in the word in: and then we'll create another object. And inside the curly brackets for that object we will specify what effect we want. So we're going to do that using the effect property. So we need effect + Colon + Space and then inside quotation marks the effect we wanna use. For example, bounceInLeft. So now, one of our text fields and this other one is really getting in the way so I'm gonna do something here. Just temporarily I'm gonna go into my HTML and I'm going to comment out that second one so that we can still see what we're doing with the first one. So we'll go back to our JavaScript. We've created are in effect, now let's create our out effect. So we'll type a comma after the closing curly bracket for our in effect and we'll go to the next line and create our out effect. So out colon space and then we have a set of curly brackets for that as well and then the effect that we want is called bounceOut with a capital O and then Right with a capital R and by default, this out effect is not going to take place. Now if we were to set this animation to loop, then we would see the out effect and in the in effect again it would go back and forth, but for now, I'm just gonna leave it as is. We've already created the animation we can right click Reload Frame to view it again and that looks pretty good. So now I wanna do something similar for title two. Some I'm gonna go back into our HTML and I'm gonna uncomment this now and it's gonna look messy for a little bit, but once we get where we're going, it will look a little better. So let's go back to our JavaScript and let's do the same thing for our second one. I'm gonna go ahead and copy and paste our properties for our in and out effect here. So inside this title2.textillate we'll create our opening and closing curly brackets there inside the parentheses and then I'm gonna paste the in and out effect here. So for the in effect, we're fading our letters up using the fadeInUp effect and you'll notice I have a delay property set here. This delay property determines the delay between each letter that's animating in. So, it's just a very small delay and then I've set shuffle to true so that they animate in a random sequence. For the out animation, I'm using the fade out up big effect which we'll see later on. And I've set that to shuffle as well. So the next thing I wanna do, there's a property in textillate called auto start. By default auto start is set to true, but if we set auto start for this second animation or this second title to false, then let's see what happens. So we're gonna type auto start and this is before we get to the in effect here. I'm going to set auto start with a capital S. I'm gonna set that equal to false and then we need a comma at the end of that and there we go. So now on the right, we see that the first title animates in but the second one does not. And we can actually control the playback of these animations in JavaScript, using this textillate framework. So this is not going to start by default. It's not gonna start automatically when the page loads. Instead, we're gonna tell it when to start. And what we want to do is we want to click on this next button to trigger the out effect of this first animation. And then when that first animation is done animating, then we wanna trigger the in effect of this one. And then for the out effect, I'm actually gonna leave this one up to you. This is gonna be your own personal challenge to create either another button, that's going to trigger this second out effect or to create some extra functionality on the existing button, to trigger that out effect once this first one has been animated. And so again I'm gonna leave this last one up to you as a challenge to give you something to experiment with for yourself. But again, what I wanna do is I wanna click on the Next button to finish out this animation, this first animation. So let's go down to the very bottom of our JavaScript and skip a couple of lines. And I'm gonna point to that button which has a class applied to it of BTN next with a capital N. For that button, I'm gonna do a click event. So I'm gonna type .on and then inside parentheses, I'm gonna type click inside quotes. And then after that closing quotation mark, comma space. And then we'll create a function here, so function open close parentheses opening closing curly brackets and then after that closing parenthesis down here we'll put a semi-colon. So inside this click function, I want to animate the first titles out effect. So we created the out effect here, but it's not playing by default. We want it to play whenever we click on that button. So the way we do that is we point to the text field that we want to animate, which again has a class of title one and I'm going to call the textillate method again. But this time I'm going to pass into it a string. And I'm gonna pass in the word out. So I have the word out inside single quotes, you can use double quotes if you prefer. And at the end of that line, we'll put a semi-colon to end our statement. And we can try that out. So let's click on the next button and now we see that out animation occur. You can also trigger the in animation by doing the same thing except we would pass in the string in i-n. And we're gonna do that for our second title, but the way we're gonna do that is a little bit different because we're not triggering that on a button click. Instead we're triggering that whenever our out effect for our first title is finished animating. And there is a property called callback that we can use to make that happen so inside our out effect. We're gonna type a comma after the bounceOutRight and then on the next line I'm gonna type call back: space and then this is gonna be a functions. We're gonna type in the word function () and an {} will nudge that closing curly bracket down and then this function will be triggered whenever the out animation is finished animating. So whenever that's done animating, I wanna point to title2 and tell it to animate in. And the way we do that is we do title2.textillate and then inside quotation marks, we'll type in the word in and then a semi-colon to end that statement. So now we'll click on the Next button which will trigger this out animation and when that out animation is done, it will trigger this callback method which will tell our second title to animate in. Let's see if that works. So I'm gonna save our work here and I'm gonna click on Next. So we see the first one animate out and the second one animate in. And that's how you can fine tune your animations and add your own options for the textillate framework using JavaScript. Thank you for watching, and I'll see you in the next lesson.

Back to the top