3.1 Animating Based on Scroll Position With WOW.js

In the last lesson we learned how path animation works, and how to use walkway.js to make it easy. In this lesson we use another JavaScript plugin called WOW.js, which simply animates things into view as the user scrolls down the page, with the help of the animate.css library we saw before. So if we check out WOW.js at, MyNameIsMatthew.com/WOW. You can see it's very, doge centric. But, as we scroll down, you can see these different elements pop into view. So you can see them there at the very bottom of the page. [BLANK_AUDIO] Now, all these animations are from, the Animate.CSS library. So just as, as you get close to the bottom of the page things start sliding in and popping in. So refresh. And it's just a cool way to add some interaction to your website. So, as you can see, you need jQuery, and let's go ahead and get started. So, we'll create a new folder here called WOW.js, drag that into Sublime Text. We'll create our index file. [BLANK_AUDIO] And our stylus file. [BLANK_AUDIO] And we'll go ahead and cd to that folder. Cd to our CSS folder, and watch it with Autoprefixer, okay? Let's go and open up this blank page. And now, what we can do is say, h1 Hello Wow.js. Now, to use Wow we need to use jQuery so let's go to Google CDN. Scroll down here to jQuery, and we'll just grab this snippet right here. Copy that. Paste it in here. Remember to prefix it with HTTP, and we'll create our own script here in JS folder called main.JS. And we need WOW.js as well, obviously. So, let's go to Github, click on the distribution folder, dist folder and we'll just grab the minified version. So select all, copy and we'll put this in our JavaScript folder as well. So js/wow.js so let's paste that in there, save it, close it. Now we need to call that as well, so we'll say script.js, wow.js. And we need to make our main JavaScript file as well. Okay. And now we'll make the, jQuery ready function. [BLANK_AUDIO] And now, all we have to do, is click on this how to use thing. We'll also need Animate.css, which we can get from cdnjs.com. So, let's type in, animateCSS. And, here it is, so let's click Copy there. And, now let's go and include that. So, we'll create a link to a stylesheet here. We'll just paste that in there. And, now we've got animate.CSS. Okay. Now if we go back over to the WOW.js documentation, and look at the second step. We just link and activate WOW.js. So we've already linked it. So now to activate it, we just need to add this new WOW.init, snippet. So we'll put that in our main.js file here and save that. And now, all we need to do, is add a couple classes in here. One of them is WOW just to signify that this is part of the wow.js library. And then we can use whatever anime.css, thing we want. So, we could use BounceInLeft. And we'll come over here and Refresh. And as soon as the window scrolls to that area, it'll bounce it in. So if this is pushed way down the screen. So let's go up here and say HTML padding top 1,000 pixels and save it. And, make sure that we link to that stylesheet. [BLANK_AUDIO] And then refresh. Now whenever we scroll down to the bottom, it won't be visible until we scroll down to the bottom. And then once we hit, the bottom, it'll slide in from the left. So, watch, watch for it. See? And that's effectively how you do that. You can add as many as you want. You can have them slide in from the left or from the right. You can use any of Animate.css's, animations. So, just check some of these out, and test it out, and that's how, wow.js works. In this lesson we learned how to quickly add some life to our pages with the help of wow.js. In the next lesson, we'll learn how to perform the sometimes dubious scroll hijacking technique, with the help of another plug-in called One Page Scroll JS.