FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Simple Animations

The Wow.js framework is designed to create eye-popping animations as soon as an item is scrolled into view. In this lesson, you'll learn the syntax for easily triggering these animations without writing a single line of JavaScript code.

3.3 Simple Animations

Hello and welcome back to scroll events made easy. Now that we've got some basic content on our page, we can start creating some simple animations using WOW.js and it's actually really simple to do. If we jump back into brackets. I've copied everything that we've done so far into a new folder called site zero seven. So all of the changes we make in this lesson will be saved in that site zero seven folder. And as we've mentioned before, with the wow.js framework what it does is it creates animations f or particular items, once those items are scrolled onto, or into the browser window. And the way we create those is by simply adding a couple of classes to the items we want to animate, the first class we need to add and we're gonna do these for the entire column. So I'm gonna grab this first column with our first image in it. And we already have a class of col-sm-4 to set up the column itself. But now we're gonna add a couple of wow classes to it. The first class is called wow. And then if we jump into animate.css, we can see as we scroll down a number of different animations defined for us so here we have something called bounce. And you'll see CSS @keyframe bounce. So this is the CSS required to create a bouncing animation. Scroll down further here's the bounce class defined then we have something called flash and we can scroll down further and we can see the flash class we have pulse. We have a number of different items here to choose from, and these class names are the names that we will use to create our different types of animation. So you can look through that to see what classes are available to you. For now, I'm just going to jump back into our HTML file. And I'm gonna add a class. In addition to the wow class, I'm gonna add a class called bounceIn with a capital I. And that will bounce this item in once we scroll down to it. So I'm gonna highlight that, I'm highlighting everything including the space before wow so that we can just click and paste. So I'm gonna copy that then it will click and paste here and we're gonna do the same thing for all of our image columns. Now there's a number of different animations we can create. This is just the one we're starting with for now. So we've created this same bouncing animation for all of our items here. So again we have the wow class which is needed and then the class name for the animation. Now you'll notice if we were to save this and jump back into our browser, and refresh, that nothing is happening yet and if you remember I told you before that we weren't going to have to write any JavaScript of our own and that's only partially true. We do have to write one line of JavaScript code to initialize this and get it working. So I didn't wanna tell you that up front cuz I didn't wanna scare you by saying we'd be writing our own JavaScript code but really, it's just one simple line. So I'm gonna jump back into brackets and I'm gonna scroll down to the very bottom underneath our last descript tag. It has to go after our other script tags because everything else has to load first and then we'll create our own script tag that's going to have one line, or it's actually going to be a couple of lines, okay. I promise, it's just a couple of lines of JavaScript, so really all we need is this statement here. New and then WOW with all capital letters, open and close parentheses.init and then a semicolon to end that statement. That will trigger everything and make it work right. But I wanna make sure that the entire page has loaded before we do that. So before we create or before we use this line of code here. I'm gonna cut that for now, and I'm gonna use a jQuery function since we have jQuery included on our site. I'm gonna use this jQuery function that's gonna be triggered whenever the page is done loading. And the way that looks, and it might not make a whole lot of sense to you, but it's the same every time so it's easy to memorize. But the way that looks as we type a dollar sign, and then an opening parenthesis and let's go ahead and create the whole thing. So we have a dollar sign, a set of parentheses, and semi colon to end our statement. Inside those parenthesis, we're going to type function and then in another set of open and closed parenthesis, and then a set of opening and closing curly brackets so inside this jQuery thing we've created, we have a function that we've created. A function is basically a block of code that you can run whenever you call that function. And the way this jQuery thing works is it will. Cause the function inside of it to be run whenever the page loads, and then inside the function we can put our code. So again familiarize yourself with this type of code. If you're gonna be using jQuery at all, you might find yourself using this a lot. Again it's basically just a function that runs whenever the page has finished loading. So you can make sure that all of your CSS and JavaScript and HTML has finished loading before you run whatever is inside this function. And that's a very good practice, so make sure you do it. So now we can just paste our code that we cut before and again, all we're saying is we're creating a new instance of this WOW framework, and we're running the init method from within that new instance. That init method basically just initializes everything to get it to work right. So let's see if it does work right. Let's save our file, we'll jump back into Chrome, and refresh the page. And we can see right away that our first three images do animate and as we scroll down, you'll see our other images animate as soon as they come onto the stage so again we can refresh our page and see it. From the beginning, we can scroll down, and as we scroll, we see those animations happening. And as the class is called, it's called bounce in, we can see that bounce animation occur whenever we scroll down to the appropriate locations. So, we can refresh that one more time and just check it out, one more time. And that's the basic bouncing animation. So, as we move forward, we can talk about a couple more animations that we can do using this wow.js framework. Thank you for watching and I'll see you in the next lesson.

Back to the top