Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Animating Letters With Textillate.js

In this lesson, you will learn how to use the Textillate.js plugin, which builds on Lettering.js, allowing you to easily create text animations letter by letter.

Relevant Links

3.4 Animating Letters With Textillate.js

Hello and welcome back. In this lesson we're going to take a look at the textillate.js plug-in which builds on the lettering js library that we discussed in the last lesson. Once lettering.js is done cutting up your headings into individual spans, textillate.js then allows you to animate those letters one at a time and it also uses the animate.css animation library. And we can see samples of that on the textillate website If we go to And on that website if we scroll down just a little bit, we can see this playground area where you can experiment with different animations. So you have an in animation and an out animation. Right now we see the out animation happening and we're gonna click on these dropdowns to try different effects. So if we try the, fade in down effect then once the animation starts over we'll see a different effect than we saw before. We'll see the letters fade in as they moved down. Now by default they're gonna go in order but then we can click on the second dropdown and click on reverse or sync. Sync will bring them all in at the same time or we can choose shuffle which will bring them in randomly in a random order and it looks good, and we can do the same thing with the out animation. And this will be a good reference point for you once you start playing around with these animations, you can just come back to this website click on this dropdown to see all of the available options. Again, at the bottom you'll notice that this depends on jQuery, animate.css and the lettering.js framework that we already talked about. So once you're familiar with that you can click to download it on GitHub. You can download the files there or you can use a CDN link which is what we're gonna do in this lesson. So you can find the URL for the code in your course notes for this lesson. And once you open that up let's go ahead and click on fork to create a new copy of it. And then once that new copy opens we can click on the settings and this is kind of were we left off before in our CSS. You'll see that we have a Google font as well as a CDN the link to the animate.css framework. And then in our JavaScript tag we have jQuery, the lettering.js framework and the texttilate.js framework. So we have everything we need in our settings and now we can start experimenting with this new library. So right now our main title here has the lettering framework applied to it but now I want to apply the textillate framework to it instead. And we already have the settings set up so all we need to do is to change this from .lettering to .textillate. Notice there's two L's there in textillate. And you'll see that now in addition to the styles that we've added to that item it's also animating in and we can test that again by saving it and refreshing the page. And we can see that the letters animate in one at a time from the left. Another thing you'll notice is that once we apply this textillate method to that particular text heading we can then go back to our CSS. And if you remember we had to change our display to inline block whenever we were styling the individual letters of our lettering.js text field, but textillate.js automatically gives them a display of inline blocks. So we can take this off now and you'll see that those styles are still the same. So nothing has been broken by getting rid of that particular CSS property. So let's jump back to our HTML and let's talk about some options that we have here. Right now everything's animating in from the left. Well, we can change the animation that's occurring by adding a data attribute called the data-in-effect. So inside the opening tag for h1, I'm gonna create an attribute called data-in-effect. And then we're gonna set it equal to the name of the effect we want to apply. So there's one called the bounceInLeft and when the page refreshes, we'll see what that looks like. So it's the same effect except at the very end of each letter animation it kind of bounces into place. We also have a fadeInUp effect, and you'll see that those all fade in as they move up. We can also adjust other properties if you remember, if we go back to textillate.js, we have this property here that tells us which order the letters are going to animate in. So we have sequence which is the default were it goes from left to right and we also have reverse, sync and shuffle. And we can shuffle the order of the letters by going back to our code and creating another data attribute called the data in shuffle and setting that equal to true. And when we do that you'll see that the letters animate in any random order. So again, you can go back and forth between your code and the textillate.js website and just play around with all of the different effects here. There are a lot to look at and we can also create out animations using the same type of data attribute. So we could create another data attribute here called data out effect and we could do a fade out effect. And you'll see that by default it doesn't actually do the out effect. Now we've created this data out effect set it to our property but it's not applying that effect. And by default the only way it applies that effect is if we turn on looping and the way we do that is we type data-loop and set it equal to true. And once we do that and our page refreshes we'll see the initial animation a little bit of a pause and then everything will animate out again. And just like we did up here, we can also do a data out, shuffle and set it to true as well so that it will randomized the order that the letters are animating off. So we wait a second and we see that happen. So those are just a few of the different options that we have whenever we use these data attributes to create our animations. And in the next lesson we'll discover how we can really customize the way this works by using JavaScript instead of these data attributes. So let's save our work and we'll move on to the next lesson. Thank you for watching

Back to the top