4.2 Animating Paragraph Lines

Hello and welcome back. Now that we understand the basics of styling each individual line using the Lining.js library, in this lesson I wanna talk about how to animate these individual lines, and it's very, very easy to do. We saw a demonstration of it on the Lining.js web site in the last lesson, but we didn't talk about just how easy it was gonna be to create that animation. All we need to do is to apply a single data attribute to our paragraph in order to get it to animate. So you'll find the URL for this starting pen in the course notes for this lesson. Once you'd open that up, go ahead and click on Fork to create your own copy of it. And you'll notice in this starting pen I've given you a little bit of a cheat sheet here. These are all of the different animation effects that you can use with Lining.js. So the way we apply these, let's take this rolling one, for instance, is we go to our opening tag for our paragraph element. And after our data lining attribute, I'm gonna create another attribute called the data-effect. And we're gonna set that equal to whichever effect we decide to use inside quotation marks. So if we want the rolling effect, we would just type in rolling here, and then we will save our work and refresh the page, and see if that works. Now we see that it didn't work, and the reason for that is we need to include one more JavaScript file. If we go to our settings you can see that we've included lining.mini.js. But if we go back to the lining.js website and scroll all the way down to the very bottom, you can see that there's an extra file called lining.effect.js. We need this file in order to add the animations. So if you're including this in your own code separate from CodePen, you would include a script tag with lining.min.js and then another script tag with lining.effect.min.js. But for our purposes on CodePen, if we go to our settings here and just copy what we have here for our lining,min.js, and then add another resource, and let's add that resource after lining.min.js, and I'm gonna paste that, and I'm just going to include lining.effects.min.js, and then save and close. And we saw it started to do something but then it stopped. Let's go back to our settings here and, yeah, that's supposed to be effect, singular, .min.js. Let's save that. And there we go. Now we see the lines animating one at a time. So that's the rolling effect that we saw there. We can reload that frame to see it again. And there we go, really nice animation. Or we could change to any of these others. So we can grab fadeIn, copy it and paste it right here, and watch that particular effect. That looks really nice as well, we can do a slideIn effect. And there we go. So there's a number of different effects that you can play around with here, but once you get all the script tags you need, once you've loaded all of the appropriate dependencies, these animations are very, very easy to create. Again, it's just the addition of another data attribute here on our paragraph. So thank you for watching. And I'll see you in the next video.