The web site of jiawp

HTML5 Animations Made Easy with Animate.css

Getting Started with Animate.CSS What Is Animate.css? Hey everyone. My name is Jeff Batt with Learning Dojo, and welcome to this Pluralsight course, HTML5 Animations Made Easy with Animate.css. Animate.css is a framework that allows you to go in and easily animate objects inside of any web page. We're going to talk about how to get started with it. We're going to talk about how to go in and download it, attach it to any project. But not only that, we're going to dive into some more advanced topics, like how to trigger animations when other animations complete, how to loop animations, how to go in and customize some of the animations as well, like the delay and the duration. We're also going to talk about how to go in and create your own Animate.css animations and customize and extend it beyond what the default's capabilities are. So we have a lot to cover, and we're going dive right in and start talking about what Animate.css is. So what is Animate.css? Animate.css is a cross-browser library of CSS animations, as easy as an easy thing. Now that's the description from Animate.css's website. It really is that easy to get started, to start animating some objects. We're going to go beyond just the default easiness of it. We're going to dive into some more advanced topics. So this course is going to be awesome. We're going to talk about all the different things you can go in and do with Animate.css. So let's go ahead and dive right in.

Entrance Animations Let's first of all talk about and explore a little bit about Animate.css before we dive in and start using it. Animate.css is a code library. So you may be asking, if you're new to code libraries, what is a code library? Well code library, depending on the environment, code libraries may be source code or intermediate language that basically has on some default functionality, some default styling, anything like that, that once you attach to your project, you now can take advantage of what that code library has to offer. So if that code library basically has already stylized some buttons and then you go into your code, your HTML, and then all you have to do is apply a class or you can apply some additional data, now all of a sudden, you don't even have to go into the CSS file, your object now works. And so it really --- the code library allows you to go in and customize and add on additional functionality without you having to code everything from scratch. And really, Animate.css you can do in three different steps. It really is that easy to be able to do. We're going to go further in detail with it, but the three main steps of working with Animate.css is one, attaching the code to any HTML file and making sure that code library is attached to your file. The second one is apply a class to an object within the HTML. So if you want to animate a picture, you want it to fade in, then you apply that class to that picture. And then lastly, you just go in and you preview the animation. And it's really that easy, just going through those three different steps of attaching the code, applying the class to the object, and previewing the animation. So a class, if you're not familiar with what a class is, in HTML, you can add on an attribute called class=, and then in quotes you give it the className. So in our case with Animate.css, we're going to attach the className that will then animate our object in a certain way. So class selectors, if you're not familiar with class selectors, class selectors themselves allow you to specify and talk to an object on the stage. So as soon as I give an object on the stage, like a paragraph or something like that, a className, I'm then able to, in the CSS file, talk to that object and then stylize that object in a different way, or in this case animate that object. So CSS animations allow me to animate in CSS, but I can't really animate or I don't see that animation until I've applied that class from that animation to that object. So to select elements in CSS, you need to have a period before that className. And this comes in handy, especially when we get into like jQuery and we're selecting a class. We need to have that period before the className as well. You don't need to have that in the HTML file, you just need to have that in the CSS and in the JavaScript if you're using jQuery to be able to talk to that class. So in CSS, if you're referencing a class in CSS, you do have to have the dot and then the className. And then within the curly brackets, you basically have your property and your values for your CSS. All right, so I have open Animate.css. I can come in here and I could take a look at some of the animations. If I come in and select this drop-down box, I can then go in and select an animation. And you'll see that that title up here will animate. If I want it to animate again, I could just click on that button for animate. So we're going to talk about this a lot. We're also going to talk about the documentation that you can see on GitHub, how to download Animate.css from GitHub or from this link right here. We'll talk about how to attach it to our project and everything you need to know to get started with Animate.css.

Exploring Animate.css There's really two types of animations that you can apply. I mean, there's different types of animation effects, but two different types of animations that you can apply. And it's usually entrance and exit animations. There's a couple things to keep in mind. You apply to objects that are entering the stage. When I talk about the stage, if I mention the stage at all throughout this course, I'm pretty much talking about the website or the document or anything that is visible to the learner at the time when they see these different objects. Now when I'm talking about objects, I'm talking about the things inside of the website. So I could be talking about a div tag. I could be talking about an image. I could be talking about just some text or anything like that. It depends on whatever object you want to actually animate. If you want to animate text and image together, well you need to wrap those two items up inside of a div tag, and then the object that you're animating now becomes that div tag because it'll animate everything inside of that div tag. So when you're entering objects or using this entering animation, you need to apply the animation to the objects that you want to enter. When you're looking for these different animations, any animation that you see, like bounce, well if it's the In or the entrance animation, then it will have the word In. So if it's bounceIn, then that means it's an entrance animation. Now the object itself will not be on the stage right away. When the user comes to the website, that object will be off the stage, and then it will come in. That's just something to keep in mind, that you know that this object will initially not be there, and then it will come in. Now the opposite goes with exit animations, and we'll talk about that in the next video.

Exit Animations So in the last video we talked about entrance animations, and so the other major animation that you'll be working with is exit animations. Now exit animations, you can think of it pretty much just as the opposite of entrance animations. You apply this to objects that are going to go from on the stage to off the stage. Now you can apply an entrance animation to come on, and then you can have that same object, whatever that object is, have an exit animation to go off. We're going to talk about being able to sequence and having something come on and having something go off the stage. But whenever you're talking about exit animations, it's going to go off the stage. Now the word instead of In, like bounceIn, is going to be Out. And so you'll have bounceIn for the entrance animations and bounceOut for the exit animations. Now if you have something that goes in and then out immediately, then you might run into an animation that has bounceInOut. So that means it's going to animate in, but then it's going to animate out just as quick. So that's something to keep in mind if you want something that just kind of pulsates, fly in for a little bit, and then fly out, then you may want to add an animation that has the word In and Out in it. Now with entrance animations, the objects were not on the stage right away. With exit animations, the objects are on the stage, or the document, and then they go out. They fade away. They bounce out. They leave. They move. Whatever basically you've selected as far as the animation, that will happen. But just keep in mind that the object will be there by default, and then it will animate out. So those are the two major types of animations. Now we're going to explore the project files that we're going to be working with and the sample project that we're going to be creating, which is going to be a Cooking 101 website. So let's dive into that and explore the sample website that we'll be animating.

Demo Project Starter At the end of each project, we're going to be working with a Cooking 101 website. Now this Cooking 101 website will be our final project. It'll be a project that you will have in order to show your capabilities with Animate.css. So let's explore the files and what we'll be working with, with both the sample project and the actual demo project. So on each project or each section that you start with, you'll have a 01 Start and you have a 02 Finished. Now the 01 Start, in each video you can start from unless you want to continue where you left off. But if for some reason your code gets messed up, you can download the sample files here and you can start from those files. Now the 02 Finished files are mostly for your reference. If you mess something up and you want to go in and look at how I did the code, you can go in there and look at how I did the code there. So first, we're going to take a look at the Start Test, and this is basically what we're going to be working with throughout most of the videos. And then at then end of each section, we're going to go into this project. Now the project is where we're going to have more content and more of a functional website that's a responsive website, and so that's where we'll go in and apply something. And that's really more of what you would show to like a potential employer or something like that. And then I have this 03 Example just to show you the example of an already animated website that we're going to be animating. And so that's kind of the finished product just so that you can take a look at that. But I want to come in here and I want to go into this Start Test, and I want to open this up inside of a text editor. Now you can use any text editor that you're comfortable with. I am going to be using Sublime, so if you want to use the same text editor as me, then I'd highly recommend that you download Sublime Text and you use Sublime Text here. Now I opened up this folder so I can see all of the files here. On a Mac, you can just drag that down to the icon. But if you're on a PC, you can open up Sublime and from a Finder window just drag the entire folder over, and then you'll see all the content over on the left-hand side. I'm going to open up this HTML file. I'm also going to come back into here, and I'm going to open up by double-clicking into that folder, and then double-clicking on the index.html file to open up that website. So this is what we're going to be working with in most of the videos. Now this is just a section of the finished website, and so we're just going to be animating these different sections here, which has an image, it has a heading text, and then it has a paragraph text. The reason why we're doing this is because I want you to get familiar with how to animate div tags and not just an image or not just text or anything like that. So that is the sample project that we're going to be working with. Let's go into the code and just take a look at it. We're using, for the actual layouts we're using Bootstrap. Now this is not a course about Bootstrap, so we're not going to cover how I actually created the layouts or anything like that. Feel free to take a look at Pluralsight's Bootstrap 4 courses, but we're using Bootstrap 4 here. Now as you go through here, you'll notice different columns, like our different sections here, and you'll notice the images that I'm pointing to and a couple Bootstrap classes, like this img-fluid, which just basically makes the image responsive. And that's all that we have. We have these 4 columns, column 3, column 3, and that's basically just taking, out of 12 columns it's just going to, this section is going to take 3 of those columns. And so that's really all that we're going to work with in the example files or in the main files. But once when we get into the demo project, let's open that up real quick. I'm going to close that out, come back into here, and then I'm going to open up the Start Project here. And so we're going to come in and open that up in Sublime. So just drag it into Sublime if you want to open up the folder. And I'm going to come in here and double-click on that index.html file, and you'll see here that we have a lot more to this file. So we have a Banner Area. We have Three Columns. We still have that same column, that same section as we had in that other sample file, but then we have a couple info sections, we have a couple images with some text as well. Let's actually go through and take a look at what this looks as a final result. So we have this big banner with Cooking 101: The Basics. We're going to have that title fade in. We're going to have the background fade in as well. And then we're going to have these four different sections here. So this is what we're going to be working with most of the time, and this is in our final project as well. We have this other section with text, a nice phone image there. We have this other section with a laptop and some text, a Call To Action spot, and then a quote down at the bottom, as well as a footer there. So this is kind of your more completed website that gives you a better example to show to future employers as well. I'm going to take this course and I'm going to show you that it is responsive. So as you start to scroll down to the different sizes, it does respond. It does adapt to the different screen sizes. Those are the files that we're going to be working with. So this project file, we are not going to be working with throughout this section, but we are going to be working with this at the very end of each section. So let's take a look at one more thing before we finish here. I'm going to come in to the example, and I'm going to double-click on the index.html. So you can notice with this index.html, we had that animate, I'm going to hit Refresh again, we have the background fading in, and we have the text sliding in from the left. So that's just a quick example. Let me scroll down and show you kind of the different sections. You can see that as I click on something, different things will happen. They'll bounce, and you can see that also this iPhone kind of flies in. This laptop flies in as well. So this is the kind of stuff that we're going to be doing. We're going to take this demo project file that really has no life to it, no animations at all, and then we're going to apply those animations, and we're going to do it in various, different ways. We're going to sequence animations as well, so we have a lot to cover. And so let's go ahead and get into how to download Animate.css and attach it to your project.

Animation Basics Module Intro In the last section, we covered a little bit about what Animate.css is, and we talked a little bit about what frameworks are. We talked a little bit about the sample projects that we'll be working with as well. So in this section, we're going to go ahead and start talking about animation basics. We're going to talk about how to download Animate.css, how to attach it to a project. We're also going to talk about the different types of animations that are out there that you can use as well and how you can explore the animations inside of here. So we have a lot to cover. Let's dive in and start working with Animate.css.

Downloading Animate.css So the first step in working with Animate.css is downloading the Animate.css framework. So we're going to go ahead and go to this website. So if you want to get to it just by googling animate.css, it's the first option that comes up; otherwise, you can use this website to go directly to the website. So we're here at Animate.css's website, and we're going to go ahead and download Animate.css so we can attach that to our project. So you can come down here and you can explore Animate.css, and we'll do that in other videos. But here, we're going to come down to where it says Download Animate.css. If you're on Safari and you click on this, it's just going to take you to the raw CSS file. If you want to actually download it as a separate file, you do have to, on Safari, right-click and go to Download Linked File As, and then this will pop up so you can download that Animate.css to your desktop. I'm going to go ahead and do that, or you can come into where it says View on GitHub. And if you click on View on GitHub, you can come down to all of the different files, including the different example files as well. And you can come over here where it says Clone or download, click on that, and you can either clone it if you're familiar with GitHub and Git, and so you're using something like that you can clone it, and always just pull the latest files if needed as well. Or you can click on Download ZIP, and this will download as ZIP to your desktop. Now we're going to explore both ways of just taking the Animate.css and attaching it to your project, and then we're going to explore just unzipping this right now. So I'm going to go ahead and hide Safari. And you can see the file that was downloaded is animate.css.txt. I don't know why it added a txt there. I'm going to go ahead and just get rid of that txt. So I renamed my file just animate.css. On a Mac it may pop open, are you sure you want to change it? Yep, I'm going to use CSS here. And now if I open up that CSS inside of like a text editor, you'll notice that it is a full CSS file with CSS formatting and everything like that. And that's exactly what we want. We want to have this animate.css file here. Let's come back into GitHub and once this Download ZIP is done, we can then come in and unzip it. If you're using a Windows machine, you may need to right-click and go to Unzip. But in this case on the Mac machine, it gave me all the files that I need. If you're familiar with gulp, you can use gulp as well, or you can come in and always using the animate. minified file, and that just basically makes it even that much faster and lighter. You can see right here the unminified file is 75 KB, the minified file is 56 KB, so it is faster to use the minified one. However, once we get to the point where we're actually going to be creating our own custom animations, then we definitely want to have the one that's unminified, and then we can always go in and minify it later. Now you don't need everything else. You can take a look at the different JSON files here. You can take a look at the different source files as well. If you click on that, you can open up these different CSS files and see exactly how this flip.css works. And the reason why it's separated is you can actually go in, and if you just want one certain animation, you can grab one of these CSS files. Instead of grabbing everything, you can just grab one of them, and you can see that the file size is a whole lot smaller. So if there's just one animation that you're going for, then just download the ZIP file, go into the source, and then just find that animation and attach just that animation to your project file. So that's how you download Animate.css. We're just going to be working with this one file for now. So I'm going to delete this folder and we're just going to take that animate.css file, and then later we're going to attach that animate.css file to our project.

Attaching Animate.css Now we're going to learn about attaching the animate.css file to our project. So let's go ahead and demo a couple things. We're just going to copy the CSS first of all into our project, and then we're going to attach the CSS file. So the way that you attach a CSS file in HTML, if you're not already familiar with it, is by using the link html tag. And so you need to have a couple different things since you have a rel=, and then within quotes stylesheet you can define it as a type of text/css, and then you need to have an href. Now the href is basically just pointing to the CSS file. We're going to place this inside of a folder called css. And so you need to have a css/, and then the name of the file, which in this case is animate.css. Now you must do this before you can animate anything. So attach this file first, and then you can go in and you can start animating at that point. So let's go ahead and go to our project file. We have our animate.css that we've downloaded. We have our 01 Start folder. So I'm going to go ahead and open that up. And the first thing I'm going to do is copy or just move this animate.css file right into my css folder. So I'm going to open this up inside of Sublime Text, and then I'm going to go into the index.html. Now when you attach a CSS file, you need to do that inside of the head tag. So this head tag right here, if you're not familiar with head tags, if you're not familiar with basic html tags, then I highly recommend you go back and review a Pluralsight HTML basic course. But we're going to come down to where is says Custom CSS, and we're going to, right before that, attach this animate.css. Now the reason why I want to do that is because the Custom CSS is my own CSS. And so when I override something and I'm going to customize something, I want the CSS of interaction.css to come after the animate.css. Whatever you place first will get attached first and that code will run first, and then this code, whatever's next will run next after that. So I want to be able to override things from Animate.css, and so I'm going to have that be attached before I actually attach my own CSS. So we're going to make a comment here. If you're on a Mac, you can hit Cmd+\, and that will make a comment for you or you can just type that out. I'm going to go ahead and just type in Animate CSS. If you're on a PC, you can do Ctrl+\. So I'm going to just start typing in link. If you start typing it in, inside of Sublime it'll have these code hints that will pop up. The reason why I like Sublime is because of these code hints. I don't have to type everything out. If I just hit Enter, that will add all the different attributes that I need in order to use this link attachment. The only thing that it doesn't need or it doesn't know is where this file is, and so we have to type in the path to that file. So we're going to say css/animate.css. Now the way that I get that is basically the name of the file. So let's go into this attachment, let's go into css, and there is our animate.css. Sometimes just to get it right, I'll just go in here and copy the full name of that file, and then just come back in here and just paste that name right there. That way I just make sure that I have it correct and everything is good to go. So we've attached animate.css to our project file. We're ready to go. We're ready to start animating it. So let's explore a little bit of the animations before we actually start diving in and applying some of these animations to our sample project.

Exploring the Various Animations Before we go in and start applying animations to our sample project, I want to go in and explore a little bit of the different types of animations that Animate.css gives us. So first of all, what we're going to do is we're going to look at the various animations that come out of the box with Animate.css, and then we're going to review the animated class. This is a class that you have to attach to any object that's going to be animated. It does not animate your class, but it will actually let Animate.css know that this class or this object is going to be animated. So let's first of all go back to Animate.css, and let's take a look at a little bit of the different animations that are available in Animate.css. So I'm going to click on this box, and you'll notice a couple different things. The first thing is this Attention Seekers. If I click on one of those objects, the animated title is going to, or the title itself, is going to animate. If I click on another box like flash, for example, it'll let me know exactly what that animation is. Now this is useful because not only can I see what that animation is, but this basically is the class that I need to apply to my object. So if I want something to be, for example, have this rubber band effect, then I need to apply the class of rubberBand to that object. Also, coming down here, you can see that it's sectioned off a little bit. So we have the Bouncing Entrances. And so if I click on bounceIn entrance, so the bouncing in means this is the entrance animation. I can see that the bounceInDown, this will basically come in from the top, the bounceInLeft will come in from the left, and the bounceInUp will basically come in from the bottom. So those are different directions that I can choose which one of those that I want, but this is basically the entrance animation. We talked about that before that this is going to start off the stage, off the website, and then it's going to come in. So Bouncing Exits are going to start on the stage. So if I select one of those, you can see that it started on the stage, and then it animated out. You can see right there bounceOutLeft, it animated out, and it was off the stage. We have a couple different things like fading, different types of fades in, fadeIn, fadeInUp, fadeInLeft. We have a couple of fade outs as well. We have flippers. Now these flippers are basically going to fade in. So you can see flipInX, flipInY, and those are just the different types of flips that you can apply. We have Lightspeed. That's just going to make it look like it's going into lightspeed. Rotation. Sliding effects. These are going to slide in from off the stage, slide out to off the stage. Zoom Entrances as well. It's going to zoom up. And then we have some special ones down at the bottom. So like hinge, for example, you can see that it hinges and then just kind of falls out of the area. JackInTheBox. We also have rollIn and rollOut. Those are your different types of animations, and that's what you can use by default just by going in and taking one of these classes and applying that class to your object. But there's one other class that you need to apply before you can apply one of these classes, and that is the animate class. So in the animate class or any object that you're going to animate you need to have two classes. The first class always needs to be animated. So you need to have the class of animated before you apply the type of class that you want, so the type of animation that you want. So, for example, if you wanted the bounceIn animation, then you would need to have two classes on that object. So you will need to have an animated class, and then you will to have a bounceIn class. Those are the two classes that need to be applied before you can start animating your objects. We'll take a look at actually animating the objects and start animating some of the content in the next video.

Animating Your First Object We are ready to start animating our first object. We've downloaded the Animate.css, we've attached it to our project, and we've kind of covered the classes that you need in order to attach the animation. So now we're ready to go in and start applying these animations to our project file. In this demo, what we're going to do is we're going to add our first animation, we're then going to preview the animation, and then we're going to change the animation. This is usually the process that I go over. So I first of all just say okay, I think this animation might work, I go in, apply that animation, preview it, and it's not exactly what I wanted, so I go in and I change it to a different animation. So that's exactly what we're going to do here. We have our 01 Start project file that already has our attachment on there. So I'm going to go ahead and open this up inside of Sublime Text. You can see that I have my animate.css already attached, so that means I'm ready to go. I'm also going to come up and just open this preview up here. So let's go ahead and hide Sublime. I'm going to double-click on this folder, and then double-click on where it says index.html file. That will pull up the project file so I can see exactly how this is going to work. Now I still have my Animate.css website open. The reason why is so I can go in and I can find an animation that I want. I'm going to start with bounceIn, and so that's the exact animation that I want. This is a class that I need to be using. So I'm going to come back into Sublime, and I'm going to animate this first object. Now I want to animate everything from the image to the heading tag to the paragraph tag, so I'm going to apply the class to this div tag. Now you can apply several classes to a div tag just by adding a space. So you can see it already has a class of col-md-3. That is a Bootstrap class. I don't want to mess with that because that handles the alignment. So I'm just going to add a space here, and then I'm just going to say animated, and that's the first class that I actually need to apply. After I add a space, I need to add whatever animation I actually want to have happen. So in this case, let's just go ahead and add a bounceIn. So I'm going to type in bounce, and then I'm going to use a capital I, and then a lowercase n. Now that is using something called CamelCase. When you're going to have several words, you can do one of two things. You can add dashes inside of your classes or you can use CamelCase, which means that any additional word, if there's two words that you're going to combine, the first word is going to be lowercase, so in this case bounce is lowercase, and the second word is going to be uppercase. So in this case, In has the uppercase there. Now if I was going to have bounceInOut, then this third word would also be capitalized as well. So keep that in mind when you're looking at these different classes, the bounceIn, the bounceInLeft, the bounceInDown. The third word is capitalized there. All right, so now we have these three different classes applied to this one section. So let's go ahead and preview this. So I'm going to come into my Cooking 101, and I'm going to go ahead and hit Refresh. I can click on this Refresh icon or I can just hit Cmd+R to hit refresh. And as soon as I do that, this animation has now applied. It has bounced in. I like that animation, but I may want to have something different. So let's go back into Animate.css. Let's find a different animation that we want to use. For this example, bounceInLeft. Let's go ahead come back into our project file, and let's add in a Left at the end of that. And now, I'm going to go ahead and hit Save, and then preview this again. So it's good to have your code up here. Maybe if you have several windows, you can have your project file up or your code in one window, and then your preview in another window. So it's up to you how you want to structure that. But usually, I'll switch for --- I'll switch back and forth with just a Command tab here. Then I'm going to come into Cooking 101, and I'm going to go ahead and hit Cmd+R for refresh. And you'll notice that it bounces in from the left. Now that's exactly what I wanted. It now has bounced in from the left. I've applied this animation to this first object. And because I applied it to the div tag that surrounds the image, the heading, and the paragraph tag, everything is actually animating in. If I just wanted to apply this to just the image, for example, then I can come over here and I can cut that. Come over to the image class, and then paste it right on the image. Now if I were to come back in here and hit refresh, you'll notice that just the image has animated. So that's how you get started with animating. So let's go in and just take the time, and I want you to do this on your own, I want you to go in and animate each of these columns. So I'm going to go back here and just hit Crtl+Z to go back in here. And I want you to add on your own animation for each of these columns. So you have to have the word animated, and then you have to pick a different animation for each of those columns. You can use the same animations, but just to get used to it, I want you to go ahead and pick different animations for each one of them.

Looping Animations So we've learned about how to attach Animate.css to our projects. We've also learned about how to start animating different objects, whether it be a div tag or whether it be an image file or any other type of object that's on the stage. And now we're going to learn about how to loop your animations. So, looping is essentially just running the animation over and over and over. And it's pretty simple to do inside of the HTML file. Now there's other ways that you can run the animation for a certain number of times. We'll talk about those in the different settings that we are going to cover in future sections. But for now, I'm just going to show you how to actually go in and loop your animation, and it's pretty easy just by adding a simple class to your different objects. So I'm going to come in here, and this is the sample project that I've been working with. In the end of the last video I basically gave you the task to go in and animate every single column here, and I've done that. You can that I have a shake, I have kind of a bounce up as well, and then I have something kind of fading out and twisting out as well. So that's what I've done so far, and let's go ahead and take a look at the code here. So I'm in the code, let's go ahead and scroll down here. And you can see that we have a shake for the second object, we have a tada for the third object, and then we have a flipOutX for the fourth object. And so all of these are going to go in and animate in different ways essentially. So if you want to have something kind of infinitely, just go ahead and start looping over and over and over, it's done by simply just coming in here and adding a class to one of those objects. So you have to have the animated class, you have to have some animation. So in this case the animation is shake, and I have those two things, but I need to add one more class, and that is the class of infinite. So that means that it's going to infinitely loop over and over and over. So let's go ahead and see what that looks like once I come in and preview it. Okay, so we're back in our Safari here. I'm going to go ahead and hit Refresh. And you'll notice that the shake just starts to loop over and over and over. It'll slow down like the shake normally does, but it doesn't stop. It'll start shaking again over and over. Now I can then call in and I can remove that class if I want to, but we have to do that through jQuery. We'll learn about how to do that in a later section. But for now, that's at least how you go in and apply a loop animation to have something go over and over if needed.

Animating Various Parts of the Demo Project All right, so we've gone through, we've learned how to animate, and now we're ready to come back into our demo project and start animating different things about our demo project. So a couple things that we're going to do in this video is we're going to be working with and going back to that Cooking 101 site, and then we're going to animate various sections in that site. After we're done with that, we'll come back in here and wrap up a summary for this section. So I have my project on my desktop here, this 01 Start Project file. Now we really haven't done anything with this starter project yet, so I'm going to go ahead and open up the index.html file. It already has the animate.css attached. I'm going to go ahead and preview this in a browser just so I can see what this looks like. So coming back into my folder, I'm just going to go ahead and double-click on Animate.css. Nothing is animated yet. If I scroll down, it's absolutely just kind of static there. So let's go ahead and switch back to the code and start adding on some CSS animations. All right, so I'm going to come in here. And the first thing I want to do is I want to take this colorOverlay, and I want to add a fadeIn. ColorOverlay is basically the black over the image. Let's go back into the browser, and you'll notice that the image itself is kind of darker here, so I want to fade that in to begin with. I'm going to come back into the Overlay, and I'm going to add on my animated class first of all. So animated, this essentially is telling Animate.css that this object is going to be animated. And then I'm going to add on the animation of fadeIn. Now make sure that the In is capitalized, and I'm going to go ahead and save this. You can do that with Ctrl+S or Cmd+S, or coming up to File, you can go to File, Save, as well. So let's go back into the browser and take a look at this. So now I'm going to come in here and hit Refresh, and you'll notice I get a fade of this background. That fade may go really quickly. I'm going to show you in future videos how to slow that down and have that take a little bit longer, but for now you can at least tell that's kind of fading in. So the next thing I want to do is animate in this title right here. Now I want to animate in both the top title and I want to animate in this subtitle as well. The way that I do that is by applying the animation to both of them by applying that to a div tag that covers both of them. So let's go back into the code, and I'm going to come into this section right here. This div tag covers both of them, so we have the heading 1 tag and the paragraph tag right there. And I'm going to make sure that I have, right after the heroText, the animated class. And so I'm going to say animated, and then I can do a fadeIn as well, but I want it to also move in. So I'm going to do a fadeInLeft. If you don't know exactly which one you want to do, go back into Animate.css's website and explore the different options that you have available. Now I'm going to save this, and let's go back into the browser. And you can see here in the browser if I hit Refresh, not only does the overlay fade in, but the text itself also fades in, but it also comes in from the left. If I want to change that to a different direction, I can, but I at least have some animation, some life to my project. The next thing I want to do is I want to animate in these different sections here. Now I'm eventually going to sequence these animations. So I'm going to have the first one come in, the second one, the third one, and then the fourth one. For consistency purposes, I want to make sure that all of those have the same animation. So let's go back into the code, and let's go to that section. I want to go to the first section here, and right after the col-md-3, I'm going to add the animated class, and then I'm going to go ahead and add on the zoomIn class. I want this to zoom in so it looks like it's really small and then gets to be the exact size that I want it to be. I'm going to preview this before I apply it to the other columns, so I'm going to switch back into my browser here and I'm going to go ahead and hit Refresh. So you can see it's a nice zoom, it happens pretty quickly, and then it starts to slow down towards the end. I like that a lot, so I'm going to go back into the code and apply those same classes to all four columns here. So I'm going to take this, copy this animated and zoomIn, and then go ahead and add a space. If for some reason you don't add a space, you may run into some issues where the animation may not be happening correctly. So I'm going to add a space to all four of those columns. So right there I did not add a space, you'll have to come back in here and add a space or else you'll see some issues when you try to preview it. All right, so I'm going to go back in and switch and see if this has applied. Hit preview and you can see that all four columns are animating and they're all zooming in. All right, so coming back into the code, we're going to do a couple things here. First of all, I'm going to take this section right here, this Mobile Ready Recipes, or let's come down here, yeah, let's go back up to here. This Mobile Ready Recipes section, I'm going to go ahead and add a class. You can see this one already has a lot of classes, and that's more to handle the padding and the margin at different screen sizes so when it becomes responsive it actually adds on additional padding or switches the padding to certain sizes at different screen sizes there. But I'm going to go ahead and add an animated. And there's really not a limit to the amount of classes that you can have on an object. So I'm going to say animated, and then I'm going to add on the animation of flipIn, and then Y. Switching back into the browser, I can go ahead and hit Refresh. Scroll down a little bit more, hit Refresh again, and you can see that text kind of flips in and animates in as well. So let's go back into the code. Let's do the same thing with the image, but instead of the flip, I'm going to go ahead and say animated, first of all, and then I'm going to say bounceInRight. So saving that, I'm going to go back into the browser and then hit Refresh, and you'll notice that the iPhone animates in, kind of bounces in from the right. Now one word of caution, and this does bug me tremendously. If you have an object that's on the right-hand side of the stage and then you add an animation to animate in from the left hand of the stage, you're starting to cross objects, you're starting to cross the image over the text. And to me that just looks bad, is you're crossing those objects and it's just like it shouldn't touch for some reason unless it was some game where it can bounce off of each other, just avoid that. If that's the look you're going for, great. But if you can, just avoid that. So I'm going to come back into the code here, and I'm going to show you what I'm talking about. Instead of bounceInRight, I'm going to say bounceInLeft. Coming back into the browser, hit Refresh, and you'll notice the iPhone comes in from the left and goes all the way over the text and goes into the right position at that point. That's what I'm saying, is try to avoid that. If the object is closer to the right-hand side of the stage, then do a bounceInRight instead of a bounceInLeft. All right, so what I want you to do is in the next section, I want you to add on your own animation on the text here, and then also, this is the laptop, so add on an animation to the laptop, and then add on an animation to the text. And so I'm going to let you choose what those animations are. But so far, we've been able to apply these animations to our sample project. This section has really allowed us to do a couple things. It allowed us to download Animate.css. It allowed us to attach Animate.css to any project. It allowed us to explore various animations as well. So we are able to see the types of animations that come default with Animate.css. And we were able to get in and start animating our first object, as well as loop our animations over and over if needed. And then we were able to go in and animate various parts of our cooking project. So we've done a lot, and honestly, if that's all you need to do in Animate.css, then great. You don't need to continue in this course. You can just do the basics there. But there is a lot more that we can cover, being able to set the duration, being able to set a delay, being able to trigger an animation or sequence animations as well, being able to call something after an animation ends. So there's still a lot we can cover in this course, but if you only need a simple fade in, you only need something to move over from the left to the right, then this is pretty much all that you need to know. You can get started and that's really, that's the idea of Animate.css. It's really that easy to get started. But then if you want to extend it, then you can extend it, and that's really what we're going to cover in these next couple sections.

Changing the Animation Settings Module Intro In the last section, we covered all of the basic Animate.css features, being able to animate an object, being able to switch out the different objects, being able to loop the objects as well. And so now, we're going to go in and we're going to explore, in this section, more settings that you can do right inside of Animate.css. This section does require you to use some CSS. So far, we've just been working with HTML, but now we need to go into our CSS, and we need to apply some settings to our CSS in order to change the duration, in order to change the timing, in order to change some loops. If we want it to loop for just a certain number of times, we need to be able to do that in our CSS file. And we're going to do that in this section.

Animation Durations The first setting that we're going to talk about is animation durations. This is setting how long the animation will take. So if you want the animation to take 2 seconds, you can set it to be 2 seconds. Now like I mentioned in the introduction video, you have to do this inside of CSS. You don't really do this inside of HTML. So we need to be familiar, a little bit, with CSS. And so we're going to create a class in CSS. We're also going to add on some vender prefixes. We'll talk about what vendor prefixes are, and then we're going to adjust the duration from there. So I have my sample project here, and I'm going to go ahead and pull that sample project up in Sublime. Double-click on the index.html file, and you can see we still have our same settings from our last project. So if you're continuing on, you can just use those files there. You don't have to download these starter files for this section at all. You can just continue using that. But what we need to do is we need to come into this CSS file. So I'm going to select this drop-down box. If you have the folders open, you can do that; otherwise, you're going to have to get to where it says interaction.css. Now this is my own CSS, the CSS that I used to create the layouts for that section. And you can see that it has Responsive Code that I can go in and adjust some of that responsive code. But what I want to do is come down a couple sections right before that Responsive Code, and I want to add on a class for section1. I'm going to talk to section1. And so the way that I talk to a class is by adding on a dot inside of CSS. I'm going to come down one more line, and I'm going to add a comment by hitting Cmd+\, or Ctrl+\ if you're on a PC, and I'm going to go ahead and say Custom Code. And in section1 where you put the properties and the values is inside of curly brackets. So I'm going to make sure that I have a starting curly bracket and a closed curly bracket. From here, what I start to do is I start to add on what's called vendor prefixes. Now vendor prefixes are essentially ways to communicate with certain different types of browsers. If you think about all the different types of browsers that there are, you have Safari, you have Chrome, you have Firefox, you have Internet Explorer, you have Edge, there's a lot of different browsers out there. Now each company that makes a browser can adjust that browser and how it reads the HTML file and the CSS file differently. So in this case, if you want it to read in a certain way, then you have to have, in animation or duration, you have to have what's called a vendor prefix for the type of browser that it is. It's because some browsers will adapt something called a WebKit, which means that it's more of a general kit that can be used, and then other browsers don't use that kit, so you're going to have to use a different kit. It's just a couple things. If you want to read into it, I would look up vendor prefixes and you can dive in and explore it a little bit more. But the way that you do this is you basically type in, and this is where you'll type in the vendor, whatever type of vendor it is, whether it be WebKit or something else, and then you type in -animation. Usual CSS is basically applying the property and then the value of that property. So right now, we're just typing in the property, and there is a couple dashes to get this, and then one more dash is duration. So we're going to say vendor, whatever the vendor is, animation-duration, and then we have a colon and then a semicolon to end that line. So what I want to do is add on how many seconds I want this to take. If I want this to be 5 seconds, then I have to type in 5s, now s standing for seconds. If you want it to be 5.5, you could do that as well. But the key is I can't just have vendor here, I need to specifically talk to a certain type of vendor. Now if you're just targeting like Safari or Chrome, kind of the more modern browsers, then all you have to do is actually add on WebKit. If you're going to target other ones, then you have to come in, and so you have to find the different vendor prefixes for those other browsers. Here is one vendor prefix that I'm familiar with, which is developer.mozilla.org, and then you can see the rest of the URL there. I'm going to go ahead and go to that URL. And you can see right here where it says Vendor Prefix, it will give you an explanation of the different types of vendors that are out there. And you could see that the first one is webkit, which will basically take care of Chrome, Safari, Opera, iOS browsers, Firefox on iOS, and so forth. Now m-o-z stands for moz or Mozilla, and so Firefox. O stands for, right here it says versions of Opera or pre-WebKit. M-S stands for Internet Explorer, and then Microsoft Edge as well. So if we come back into the code, what I would do is if I want to have other things besides WebKit, then I'd go ahead and paste that. And then just type in m-o-z, which stands for, which will apply to Firefox, stands for Mozilla. Then I'm basically going to say that this is going to be the duration for that browser. And you have to have both lines if you're going to target all these different types of browsers. But I'm just going to go ahead and preview this for now. I just wanted to make sure that I covered vendor prefixes a little bit. So I'm going to go ahead and go into the folder. And I haven't previewed this yet. I'm going to click on index.html, and I'm going to come in here and I'm going to preview this. But you'll notice that the animation still happens pretty quickly. The duration did not actually take effect. Now why is that? Because I haven't actually applied this section1 class to any object. So what I need to do is I need to come into the animation or come into the HTML, and I'm going to copy, first of all this is the CSS, but I'm going to copy this section1, and I'm going to go into index.html and I'm going to paste in this div tag, I'm going to paste the word section1. That way I can talk to this section. I'm not talking to any other section. I'm just talking to this one section. If I wanted to talk to two sections at once, I could make sure that both of them have the same class. But for this, I'm just going to go in and I'm going to say section1. Now I could do this with ID. Instead of class, I could say --- I can use a hashtag, which would basically be the ID. But class is fine, so I'm going to go ahead and hit Save. And then let's preview this. So you could see as I'm previewing it, the animation takes a little bit longer, that bounce animation. So it takes a little while to even start, and then the actual bounce takes a little bit as well. I've essentially affected the duration of this animation. And I could go in and I could create a duration for section2, and apply the class of section2 to that div tag, and then section3 and section4 as well. One more thing I want to cover is if you come into the index.html file, you may be wondering, well, why don't I just say I want to affect the duration of bounce? Why do I have to create a completely new class? The reason why is because you may be using bounce in several different locations. So you don't want to just use bounce because you want to be able to use bounce over and over. And so you just want to talk to that one section. You don't want to talk to every section that has bounce. You just want to talk to that one section. And that's the reason why I gave this section a different name. So I just wanted to make sure that that was clear. So now that we've learned about durations, let go ahead and talk about delays, and what we can do with delays.

Animation Delays In the last video, we learned about adding on durations to our animations. But in this video, we're going to learn about adding on delays to our animation as well. Now delay is essentially just going to say okay, how long do I want the animation to wait before it starts to animate? So we're going to adjust the CSS that's going to include a delay. So let's go into the css file. In the last video we added on this section1, and we added on a webkit-animation-duration, and then we adjusted it to be 5 seconds, but I came in here and tweaked that to be 2 seconds. I don't want it to be too long. And then I'm going to come into index.html file. You'll notice that I added on that class of section1 so it knows that I'm talking to this section. So going back into interaction.css, this is pretty simple. So if I come in here, I could just do the same thing that I did before. So if I'm talking to the WebKit, I can say webkit-animation-delay:, and then I can add on the seconds of the delay. So if I want this to be 2 seconds, I can go ahead and say delay this for 2 seconds, and then do the animation for 2 seconds as well. So let's go into our browser and preview this. Let's hit Refresh. You'll notice that it waits 2 seconds, and then the animation itself takes 2 seconds. That's how you go in. It's pretty simple. If you already know how to do duration, then you know how to do delays as well. You just change the text from duration to delay, and then adjust that there. In the next section, we're going to talk about iteration count. We've already learned about how to infinitely loop something over and over, but let's say you just wanted to do it couple of times and then stop. So we'll talk about how to do that, and you use an iteration count in order to do that.

Iteration Count The next setting that we can adjust is the iteration count. Now we've already learned how to loop an animation over and over, and that is by using the class of infinite. But now we can say, well I don't want it to infinitely loop, I just want it to loop a couple of times, and then I want it to stop. Well that's where iteration comes into play. So what we're going to cover is how to adjust that iteration count inside of the settings. So let's go ahead and go into our code. And in the past, we've already worked with animation duration. We've already worked with animation delay as well. Now the iteration count is pretty much the same. So if I come in here and add a -webkit, and then -animation, I'm going to go ahead and add an iteration-count, and that basically says how many times do I want this to play? And so if I want this to play 3 different times, I'll go ahead and just type in 3 there. Let's go back into our browser. Let's hit Refresh here, and you'll notice that it will delay for a little bit, it'll bounce, and then it'll bounce again, and it'll bounce one more time, and then it will stop. So it doesn't delay every single time, it will basically just delay the first time, and then it will loop however many times you say it to loop, it'll loop for that certain number of times, and then it will stop. If you wanted to, you could come into the code and instead of 3, you can actually type in the word infinite here as well. Now you can do that as a class or you can do that inside of this CSS. It's up to you. So that is how you do, for the iteration count that's how you come in here and adjust that setting as well. Now you could have it loop over and over, and then you could trigger the animation to stop. We're going to learn about that once we get into like jQuery, being able to add classes and remove classes and such. But for now, that's at least how you set the iteration count in Animate.css.

Changing the Settings of the Demo Project Now that we've learned how to change some of the settings inside of our sample project, we're going to come into our demo project, and we're going to adjust some of those settings inside of our demo project. So first of all, we're going to apply what we've learned about into our Cooking website, and not just the sample website that we've been working with. We're going to adjust the duration of our animations. We're going to adjust the delay of our animations. Then we're going to adjust the iteration count of some of our animations as well. And then we'll come back in and wrap up what we learned. So going into our code, I'm going to go ahead and first of all come into my index.html file, and what I'm going to do is I'm going to work with these columns that we've been working with in the past. And you can see that we have a zoomIn animation for all of those. So I'm going to come in just so I can talk to each one of these, and I'm going to add on a section class. And I'm going to say section1 for the first one, section2 for the second one, section3 for the third one. Let's go ahead and adjust that and make sure that you have a space there. And then the last one is going to be section4. And so those are our four sections. Now let's come into our interaction.css. This one has some more CSS than our previous example did. So I'm going to come down and before the Responsive Code, I'm going go to go ahead and just add on a Custom Code here. And then I'm going to say .section1, let's just build out all our classes here, open/close curly bracket, and then I'm going to copy this, and then we're going to paste it three different times. And then change to section2, change to section3 here, and then change to section4. But on the first one, let's go ahead and add on a duration. So I'm going to say -webkit-duration. Now animation, we have to have that first. So animation-duration, and then colon. We'll do this as 2 seconds. We want this to happen over the 2-second time period. Now I want that to be on every single one of them, so I'm just going to go ahead and copy and paste that. Now there's other ways you can do that. If you just want to have one class that has kind of the duplicate properties and values, you can do that as well. First one I don't want to have a delay because I want that one to happen right at the beginning, but I want it to stagger so I want the animation, the first animation to happen, second animation to happen, and then the third animation to happen as well. So on the second one, instead of duration I'm going to go ahead and say delay. So the delay is going to be 0.3, I want it to happen right after, and then I'm going to go ahead and copy that, come down into section3, and instead of 0.3 let's go ahead and just double that, so 0.6. And then I'm going to say 0.9 for the last one. Now I'm going to save that, and let's go back into our demo project and see how that's been affected. So I'm in my demo project. I'm going to go ahead and hit Refresh here. You'll notice this staggering starts to happen. The actual zoom in takes 2 seconds each, and I think that's a little bit too long. So let me come back into the code and let me adjust the animations. Let me come back down here to section1, section2, section3, and section4. I'm going to go say 1. --- actually let's do 0.8 seconds. So I'm going to copy that, come back into here, paste that, paste that for the third section here as well, and then paste that for the fourth section. Now if I preview this, hit Refresh, you can see that it comes in a lot faster. I like that pace a lot better, and it does it one after the other. You can also do this in a different way. Instead of adding a delay to each of them, you can sequence and say okay, after this animation is done, then run this animation, then run that animation. But we're going to learn about how to do that in a different section. So one more thing that I want to do is I want to apply an iteration count to one of my objects. And so let's go ahead and apply that to this section right here. So let's go back into the code. And in the code, I'm going to go down to that section, and I'm going to go ahead and add on a class. So let's go mobile, because this section is about mobile, mobileReady, capital R. Go ahead and copy that. Let's go into our CSS. After section4, we'll apply that custom class, open/close curly bracket, and then let's go ahead and say webkit-animation-iteration-count:, and then how many times we want that to happen. So I'm going to say 2 seconds here. Go ahead and hit Save and come back into my browser, and then I'm going to hit Refresh, and you can see that animation has happened twice. I may not want that for my live website, but that's just if I wanted something to happen a couple of times or some text to emphasize a couple of times. But that's where I would go in and add my iteration count. So what did we learn about in this section? We learned about adjusting animation settings, which included durations, included delays, and it included iterations, so how to go in and adjust and add on durations, add on delays, and add on iterations, how many times you want the animation to run. We also then went into our cooking website and updated our durations and our delays to have more of a staggered effect in our columns, so we could have one animate in after the other. There is still a lot more you can do to those settings. You can adjust when you want those settings to happen. You can adjust those settings or the animation to happen when something is clicked on or when an animation completes. And we're going to learn about those different options in our upcoming sections.

Controlling Animations with jQuery Module Intro So up to this point we've learned about what Animate.css is, how to attach Animate.css to any project. We've also learned about how to start animating objects, how to loop animations as well. We've also learned about how to adjust some of those basic settings in Animate.css, like delay and duration and iteration counts as well. But there's still more that you can do with Animate.css. And this requires going beyond Animate.css and working a little bit with JavaScript. Now JavaScript, you can do all of what we're going to do inside of just plain, vanilla JavaScript, but jQuery makes it a little bit easier, allows us to select objects easier, it has a couple different classes, like being able to remove a class or add a class easily as well. So we're going to cover jQuery. We don't need to know jQuery and all the different things about jQuery for this section. We're going to cover what you need to know without having to know everything else about jQuery. So we're going to dive in and start working with jQuery to control some of our animations.

jQuery Selector Basics We're going to start out by talking about jQuery selector basics. A jQuery selector allows us to select objects or elements on the stage for the HTML file, and we can do that based off of their ID, classes, types, attributes, values, and much more. With basic JavaScript, you have to go Document, getElementByID, and select the ID as well. Well with jQuery, it makes a little bit easier. All selectors in jQuery start with the dollar sign and then parentheses, and then inside of those parentheses is where you select the object that you want to talk to. Now that object can be in couple different ways. You can talk to just the document by saying dollar sign, open/close parentheses, and then inside of the parentheses you're just talking to the document. So in this case, this first line is we're talking to the document ready. When the document itself is ready, we're going to run a function. Now after that, you can then --- if you want to talk to every single button in your elements or inside of your stage, if you only have one button, that might work. But if you have several buttons, then it will all run this function. And so in this case, it says button .click, and it's going to run that function in there. Now the last one is we can also do it based off of the selected name, the class name itself. And you can see inside of the quotes, we have a .section1. So we're just going to be talking to the classes that have section1. Now we may have more than one object that has the class of section1, but it's going to talk to all of them, or instead of the dot, we can do a hashtag if it's going to talk to just one ID. And if you have an object that has an ID and you want to talk just to that one object, then you can do that as well. So in this demo, what we're going to do is we're going to review the pageLoaded event. Now this is a JavaScript pageLoaded event that runs as soon as the page itself is loaded. And then we're going to select section 1 that we've created in our files, and then we're going to hide section 1 using jQuery. And so that's what we're going to do in this. So let's go ahead and get started. And so we're just leaving off from what we had in the previous files. And so you can either download the demos in this section and then open up, in section 1 you can open up the 01 Start, I'm going to come in here and just open this up inside of Sublime here, and then I'm going to come into the index.html file. I like to have that up just for reference and so I have the basic structure there. But I'm going to come down to where it says body. This is the body tag. And then I have an onload events that's happening. And I'm going to call a function with open/close parentheses. I'm going to call a function called pageLoaded. Now this is plain JavaScript, this is not jQuery at this point. So I'm going to come into my JavaScript file, which is under the js folder, and then I'm going to go into interaction.js. And you can see there is my function right there, pageLoaded. And this is how you run a normal JavaScript event or a function. And so I'm going to say function pageLoaded(), and then open and close curly bracket. Now the code I want to run goes inside of there. Let's just make sure that this is working. So I'm going to type in alert, and then open close parentheses, open close quotes, and inside of the quote is the text that I want to have alert. So I'm just going to say Hello there!, save that, and now let's go ahead and preview this. So I'm going to hide that, open up my folder here, and then open up the index.html file to preview this. So you can see as soon as the page is finished loading, it still had to load, the animations kind of ran before, but you can see that it says Hello there! and it alerted that. So we're good to go there. I'm going to go back in and switch to the code. All right, so let's go ahead and delete that alert. We no longer need that alert here. But we're going to talk to section1. If we come back into our index.html file, you'll notice that I added a class of section1 to this first column. And I want to talk to just that column. I want to hide that column. So we're going to use a jQuery selector to be able to do that. So the first thing you have to do is type in a dollar sign, then an open/close parentheses, and then open/close quotes. And now inside of there I talked to section1, so it's a class, which means that I have to have that dot. And so I'm going to say section1. Then I'm going to use a jQuery function here. So I'm going to say .hide, open/close parentheses, and then end that with a semicolon. That is a jQuery event, or function, that basically is set up by default so that I can just call on any object that I'm using to select that jQuery, the jQuery selector. I'm going to come into the index.html, and I'm going to show you that I have already attached the jQuery code. When I use Bootstrap, I have to use jQuery so I have that already attached here. But if you were starting a project that does not have a jQuery file attached, then you'll need to make sure that you download the jQuery file and you attach it as well. All right, so let's go back into our browser. Let's go ahead and refresh this. And you'll notice that that column has now disappeared. So it is no longer there. We've selected that column, and we told that column to hide. So that's how jQuery selectors work. You basically talk to the class or talk to the ID. If it was an ID, then you would just use the hashtag in here where it says section1. But I would need to make sure that that section1 is not a class, defined by a class, but it has an id and it is defined by section1 there as well. Either way, when you're using IDs, you need to have just one object that has one ID. You can't have one object having the same ID in several locations. That's where classes come into play. I could use section1 in different areas if I wanted to, and then using jQuery, the jQuery selector, I can talk to all of those section1s. But that's how you get started with jQuery selectors. And in the next section, we're going to go ahead and add a class that has not been added in HTML. We're going to add that in the JavaScript.

Adding an Animate.css Class Okay, now we're going to use jQuery to add a class. And so this Animate.css classes, like the animated and also the type of animation that's going to happen, we're not going to add that in the HTML, we're actually going to add that in JavaScript. And that way we can control when that class gets animated and when it actually does animate as well. So it gives us a little bit more flexibility. In the last video, we talked about using these jQuery selectors to select to the object on the stage, and then used the hide to hide that section. But instead of hide, what we're going to do is we're going to run a function called addClass. And to that addClass function, it takes a couple different parameters, and so we're going to pass in the classes that we're going to add to that object. So we're talking to section1 and we're saying hey, add the classes of animated and bounce. That way we control when that class, that addClass happens, and we do that in the JavaScript rather than just having it just happen automatically. In this demo, what we're going to do is we're going to add the code to our pageLoaded event, and then we're going to use an addClass function to get that functionality. So let's go ahead and go into the code. And the only thing I've modified from here is --- and we're still using the same code from the last section or you can download it, open up the 02 section here as well. But you can see section1, I got rid of the animated class, and I got rid of the actual animation as well. So you can see I did that for all sections, section2, section3, and section4. So let's go ahead and open up the JavaScript file. I'm going to open up interaction.js, and I'm going to come into the pageLoaded function here. As soon as the page loads, what I want to do is I want to add the class to section1, section2, and section3 and 4. So I'm going to go ahead and use the jQuery selector to talk to the object that I want to talk to, so I have to have the dollar sign, open/close parentheses, open/close quotes, and then I'm going to talk to, first of all, section1. Because this is a class, I need to have that dot, so I'm going to go ahead and say section1. But instead of .hide like we did in the last video, we're going to say .addClass. Now it has to have a capital C and a lowercase a for this to work. Here, I'm going to pass in the two classes that are going to be added to this section. So first of all, I'm going to say animated. Every object that animates in Animate.css has to have that class. And so from there, I'm going to go ahead and say bounce here. Then I'm going to end that with a semicolon. I'm going to go ahead and hit Save, and let's switch back into the browser. I have my window open here, so I'm going to go ahead and hit Refresh here. And you'll notice the only thing that animates is that first one. I've used the jQuery selector to select that first object, and I added the class to that first object. So let's go ahead and do the same thing with all of the different columns here. So I'm going to go back into my code and I'm going to copy this. If I don't have to retype everything, well great. I'm going to go ahead and copy that three times. And I'm going to switch to section2, come down here switch to section3, come down here and add that to section4. Now I'm going to switch this to shake. Let's go ahead and switch this to tada. And then the last one is going to be switched to jello. All right, so let's go back into the browser. Hit Refresh, and you'll notice we have some problems. Two and four are not actually --- oh it took at little while. I think it's because we have still in our CSS kind of a delay. Let me go into --- yep, right here the Animation settings. I'm going to get rid of those Animation settings. That was from a previous video. So I'm going to hit Save, come back into the browser, hit Refresh, and you'll notice all the animations are happening at once. If you want those settings, the duration, the delay, and everything, then great. But if you don't want those settings, then you can go ahead and get rid of those in the css file. But if we go back into the interaction.js, that's how you go in and you use the jQuery addClass function to be able to add a class whenever you want. Now, we're doing this as soon as the page loads, but we can do this when somebody clicks a button, when somebody swipes, when somebody long presses. There's a lot of different things that you can choose from. But for now, that's how you at least add a class in jQuery.

jQuery Event Triggers Up to this point, we've just been working with the pageLoaded function. Now the pageLoaded function happens as soon as the page itself gets loaded. Now that is an event. As soon as the page is loaded, hey, run this code. But we don't really have much control over that. We want to be able to control, okay, do not run this code until something happens, like a button is clicked, something is swiped, something is resized or something like that. And so that's where jQuery event triggers come into play. JQuery events are essentially saying, okay, in events is some action, something that happens, a button in clicked, something is resized, something is --- the rotation changes, or something like that, that causes this event. And then it then causes some code to actually be run. And that code itself then shows something visible to the learner. Like as soon as they click on something, the result of the code is visible. So if I click on a button and then the animation happens, the learner knows that that button then controls the animation. So this is how you do an event code, or one way to do it. There's several different ways. But we're using the selector to say hey, section1 button when something or on click, when something is clicked, then run this function. Now there's different ways that you can do it. You can do --- instead of click, you can do mouseenter, mouseout, onswipe, different things like that. And then essentially what we're going to do is we're going to run a function, and that's where we can then add our class. And so we can say section1 addClass of animate. So in our demo, what we're going to do is we're going to create a jQuery event, and then we're going to use the addClass function to add the class of the animation so we can control when that animation actually happens. You can also do this with normal JavaScript events, like the onclick events on an object. You can do that as well. But I'm going to show you how to do it in the jQuery one, and then I'm going to show you actually how to do it in just normal JavaScript. So let's go ahead and just show you what this looks like. And what I've added onto this, if you download and open up inside of the 03 project files, I basically just added on Bootstrap buttons, so Animate Section 1, Animate Section 2, Animate Section 3, and Animate Section 4. What we're going to do is as soon as this button is clicked, we're going to then fire the animation. So let's go into the code and review what the difference is in the HTML file. So I've essentially added the section right after this row. So we have this row of the different columns we've worked with, and then I added a new row. And this new row basically has 4 different columns as well, and it has a button that says Animate Section 1, Animate Section 2, and so on. So I've added classes of section1Btn, section2Btn, section3Btn, and section4Btn. Each of those will allow me to then fire or create this event that when clicked on, something will actually happen. From here, we're going to come in and we're going to add or manipulate that code later, so I'm just going to come down a couple lines, and we're going to add on our button, or Btn for short, Btn 1 event. And so what I need to do here is I need to use the jQuery selector to talk to what object on the stage. And so I'm going to come into the index.html file, grab the section1Btn just so I have it correct there. I forgot the dot, so I need to say that I'm talking to a class here. And then I'm going to use the on event. And so I'm going to say well, I need to define it a little bit more. So within quotes I'm going to say it's going to be a click event, and then I'm going to say comma, and then I'm going to type in function. I'm going to run a function after that event is detected. Now that has to have an open and close parenthesis, and then an open and close curly bracket before the last parenthesis there. Inside of there, I brought it down a line. Inside of the curly brackets, this is where I can add my code. So I'm going to take this code that I've already written right here for section 1. I'm going to cut that, bring that up a couple lines, and then I'm going to paste that section1 addClass event inside of that button. So now I'm going to hit Save there. Let's go back into the browser, and I'm going to hit Refresh there. And you'll notice that every other object, or every other column animated except for Section 1. That's because I have not clicked the button. I'm not adding that class until the person has actually clicked the button here. So I'm going to click on Animate Section 1, and you'll notice as soon as I click it, the animation happens. Now I'm going to click on it again and you'll notice a problem. It doesn't animate again. That's because the class of animated and bounce has already been applied. If I right-click on this and go down to Inspect Element, I'm going to come in here, and you'll notice inside of this section right here, the animated and bounce has already been applied, so it can't reapply it. We're going to talk about how you fix that in a later video. But for now, that's at least how you add a class using jQuery. So let's go back into the code and let's do the same thing with all of the different sections, except for section4. We're going to use just plain JavaScript for section4. So I'm going to paste that, end it with this curly bracket, closing curly bracket, closing semicolon here. And I'm going to change this 1 to 2; we're going to go ahead and do this for 3 as well, change that to 3. And then we're going to take this code and we're going to place it inside of there. And I'm going to take this code for section3, place it inside of that function. There we go. So I'm going to leave section4. Let's go back into the browser just to make sure everything is working here. And you can see none of the code works except for the last section, but it I click on Animate Section 3, that'll animate. Animate Section 2 and Animate Section 1, that will animate as well. So everything is working, except for I want to do a different approach with Section 4, so let's go into the code. And I want to go ahead and I going to create a function called animate4. So I'm going to say function animate4. This is not a jQuery function. This is an actual plain JavaScript function. And I'm going to say section4 is going to --- this code is going to go inside of these curly brackets. Now it may look like less code, and that's actually true. It is running less code than setting up this click event, but we don't have to go into the HTML file and add a click event. We do that just through jQuery. So that's a little bit cleaner so you're not having events in the HTML file, and then the code itself inside of the JavaScript file. But if you're using plain JavaScript and that's what you're more comfortable with, then this is the way to do it is you set up a function that will then run that code, but then you have to call that function on an event. So I'm going to come into index.html file, and I'm going to go ahead and add an attribute to that button that says onclick. Now, I'm then going to paste the JavaScript function here, so animate4 is the name of the function, I'm going to paste that in there and open/close parentheses there. The way that you would do that inside of JavaScript is you add the event in the HTML file using like onclick, onload, onblur, different things like that, and then you go in and you set up those functions inside of the JavaScript itself. Now it doesn't really even have to be inside of the pageLoaded in this case. It's a little bit better with jQuery to be in a pageLoaded event, but I'm going to go ahead and just take that outside of the pageLoaded events. I'm going to save that. Now let's go into the browser. I'm going to hit Refresh, and you'll notice none of the animations actually happen. When I click on this last one, the animation will happen as soon as I click on it. So it's doing the exact same thing. It's just a different way of doing it. If you're familiar with the plain JavaScript way of doing it and that's what you're more comfortable with, then you could stick with that; otherwise, you can have the event and the function all inside of this same code inside of the JavaScript. That's one of the benefits to jQuery. If you like doing it that way, you can do it that way. If not, you can do it the plain JavaScript way. Some of the other events that you can do are dblclick, submit, mouseleave, mouseenter. You don't have to just stick with just the click. You can have something --- as soon as my mouse is hovered over something, then something will trigger. That's some of the different events that you can use in jQuery and JavaScript.

Removing an Animate.css Class So we've talked about how to add a class. We've also talked about how to add a class in an event when something is clicked on. But we have not talked about how to remove a class. You'll notice in the last couple videos I talked about, well once I clicked the button again, nothing actually happens because that class has already been added, so it can't be added again. So that means the animation doesn't run again. So what happens if I want to kind of toggle the animation or when that animation is done, maybe remove the animation as well? Or if that animation is in an infinite loop, how do I stop that animation? So that's what we're going to talk about in this section. So in the demo, what we're going to do is we're going to try jQuery to remove class, and then we're going to try the jQuery toggleClass as well, and I'll explain each of those. So let's go into the code here. I've modified a little bit what we're going to talk about from the last section. So make sure that you download the files from section4 and open up those files to start from, instead of the files that you had last time. But let's call out a little bit of what those files are. So coming into Sublime here, you'll notice that I don't have a class for section1, I don't have a class for section2 or section3, but I've actually come back into the HTML and I've added this class of animated jello. So it's going to keep doing the jello, and you can see that I added the class of infinite. So that means it's going to keep doing the jello over and over and over. Now these other ones, I still have the buttons down at the bottom. These ones are going to start the other animation, but I haven't done anything in this section. I removed what I did in the last section4, section4Btn. Because what I want to do, because that's running infinitely, is I want to use this button to then stop the animation. And we're going to stop the animation with the removeClass. So coming back into the interaction.js, you'll notice that I only have Section 1, Section 2, Section 3, but I don't have a Section 4. So we're going to set up the function, first of all, to run when Section 4 is clicked. So I'm going to say function, and then I'm going to stop animation, and we'll just do that for short here, and then open/close parentheses, and then open/close curly bracket. So we're going to use this function to stop. And let's just make sure that this is working first of all. So I'm going to say alert, and in that alert I'm going to alert Hello!. So let's come back into the HTML file and let's add an onclick event. And we're going to run. I'm going to get that exact function. I'm going to go ahead and copy that, just so I have it correct there, open/close parentheses, and then hit Save. So let's go into the browser and just make sure that this is working. I'm going to hit Refresh, and then come into Animate Section 4, and then hit Close there. It is working. I got the alert. Let's go back into the HTML file and instead of Animate Section 4, I'm going to say Stop Section 4, or stop animation, you can change that, and that's just in the HTML file so it makes a little bit more sense. All right, so let's come into interaction.js, and let's get rid of that alert. I just used the alert to make sure that that function is working. That's typically what I do is I use an alert to say okay, function is good to go. That way if I start adding code in there and then all of a sudden it's not working, well I've already figured that out that it is working, and so it's not the function itself, it's something else in the code. So, let's go ahead and from here we're going to talk to Section 4, so we're going to use our jQuery selector. And now in quotes, we're going to talk to a class of section4. And then we're going to say instead of addClass, we're actually going to removeClass. This another jQuery function that we can call. And so we're going to say removeClass, but we have to call in or pass in the parameter, and the classes that we're going to remove are both animated and jello because those are the two classes that are added by default. If I come back into the HTML file, those two classes are there, animated. I might want to remove infinite as well, so let's copy that. Well actually if I remove that, then infinite really won't matter. So if I add this back, then infinite will still be there. So I'm going to hit Save. Let's go into the browser. Let's hit Refresh, and now you can see that the button has changed to Stop Section 4. I'm going to click on that, and it is now removed. If I go ahead and right-click, come over to Inspect Element so I can see the code, you can see that the column 4 still has that infinite class, but it does not have the animated class, and it does not have the class of jello. So that's how we effectively stopped the animation. It was continuing to run, but we stopped it. So now we need to add it back on. But if I come in here and I click on this again, it's just going to stop it. And I can't really go in and say okay, if it's animated --- I guess I could see if it has a class of animation and then remove the animation if it does. If it doesn't have the class of animation, then animate the class, but that's a lot of code. There's an easier way of doing this. And so I'm going to come back into the code here. And instead of removeClass, what I'm going to do is I'm actually going to change this to toggleClass. If I come in and say toggleClass, basically what that will do is it'll say if it's there, then remove it. If it's not there, then add it. If I come back in here and do the same thing with all of them, then that would work. It would just kind of toggle it from being on to off. So let's come back into the browser, and so let's go ahead and hit Refresh. And you'll notice the first time I click on it, stops. The second time I click on it, starts going again. Let's go back into the code, and let's change that. I'm going to say toggleClass in all of them, just copy and paste all of them. Let's go back into the browser here, hit Refresh, and you'll notice the second time I click on it --- so I clicked on it once and it animated, but the second time I clicked on it, nothing happened. Now the reason why, if I click on it again, it'll animate again. You'll notice --- let's go into the code. I'm going to inspect this element here. And you'll notice right now, we have an animated shake. That's because the animation ran, and then it stopped. And so from here, if I click on it again and go back into Inspect Element, the classes have now been removed. Because it takes another click in order to remove the class, the first click will add the class, then the second click will remove the class, and then I have to click again to add it back. There is still a better way of doing this that when the animation is done, then remove the class automatically. And we'll talk about how to do that. That's basically listening for the animation to complete, and then running some functions, or running some code, after the animation has completed. We'll get into that in the next section.

Adding jQuery Events So we've learned a lot about jQuery being able to add classes, remove classes, to toggleClass, to add a class by an event, whether the event be click or dblclick or something like that. So now we're going to come back into our demo project, our Cooking 101 website, and we're going to apply some of what we've learned to this website. Now a couple things that we're going to do is we're going to use the click events on the different sections. So it'll be similar sections to what we worked with in the past. And we're going to use the toggleClass to toggle the animations from on to off. We're also then going to try something different besides click. We're going to go in and we're going to use a mouseenter event. And that's basically almost like a hover event, when a mouse gets entered, it's then going to fire that code. So let's go into here and just a reminder, we have the Cooking 101 banner here. If we scroll down, those are the four sections that we've been working with. And what we're going to do is we're going to apply that so as soon as I click on it, the animation will run right away. So let's go into our code here. And so I'm going to first of all make sure that we have the animated zoomIn. We're going to remove that because we're going to toggle that class. So let's come in and remove animated zoomIn from all of those sections, section1, section2, section3, and section4. All right, I'm going to hit Save there. That looks great. Let's go back into --- or let's go into the JavaScript file, interaction.js, and we're going to add a couple different jQuery events. You can do this with plain, vanilla JavaScript if you want to, but I'm going to do it based on jQuery. So I'm first of all going to add a comment here. This is going to be Section 1. And then I'm going to use the jQuery selector to select the object on the stage, which is going to be section1. That's my class. And then I'm going to do an on function, and then I'm going to pass in a couple different parameters, which is --- the first one is going to be what type of event, and that's going to be a click. And then we're going to run a function after that. So it has to be open/close parentheses and then open/close curly brackets, and bring that down a line. We're going to do that for section 2, 3, and 4, so I can just copy this. Let me copy the comments as well. I'm going to copy that, come down, 2, 3, and then 4. So let's come in here and change that to 2, 2, come and change that to 3, changed that to 3, and then change that to 4. All right, so we now have all of our click events ready to go. So we're going to use the toggleClass in each of these to toggle the classes of animated and zoomIn. It's all going to be the same thing. And so I'm going to say section3. Let's use the jQuery selector to talk to section3. And then we're going to say toggleClass, open/close parentheses, and then we're going to pass in the parameters there, which the two parameters are the classes. So space, or I guess this is one parameter with the class, two classes itself. And so I'm going to say zoomIn, end that with a semicolon, and I'm going to copy that. And actually this is Section 1, so let's change that to section1. I'll paste that to Section 2, change that to 2. That one was already 3. We're good there. And then change that to 4. All right, so now let's go in and we're in our project here, so I'm going to hit Refresh. And you'll notice nothing happens to these different sections because I removed the animation until something is clicked on. But as soon as I click on it, you'll notice that the animation will run. But I have to click on it couple times for the animation to run again. Again, we'll talk about, in future sections, how to remove the class as soon as the animation is done, but we have to be listening for the class to be done before we can do that. So it takes a little bit more setup to do that. So one more thing that I wanted to do is let's talk to the phone itself. And what I want to do, as soon as I hover over this, I want the phone to actually animate. I don't want the animation to happen until I've actually hovered over it. I've used the mouseenter to be able to hover that. So let's go into the code, and let's add on another event, and this is going to be for the phone. So let's go ahead and come into the index.html file, and let's find our phone. You can see it right here. I need to add a class of phone here. So I'm going to say, right after img-fluid, I'm going to say this is going to be phone. We're going to talk to this specific phone here. Coming back in here, let's go ahead and build out our events listener. So we're going to say open/close parentheses, open/close quotes, make sure that we have a dot for phone, and then say on, open/close parentheses there. And instead of click, we're actually going to say mouseenter. Now that won't work on mobile, so you may not want to use that, but for just testing out here, that will work just fine. There's also a specific touch event if you wanted to create one. That's if you want something to happen on a touch event different than a mouseenter event. All right, so now what we're going to do is we're going to select the phone again. So .phone, and we're going to say toggleClass, and we're going to add on an animation of animated, and then bounceInRight. All right, so let's save that. Go back into the browser, hit Refresh, and you'll notice as soon as I hover over it, it will bounce over again. The image itself, I think, is kind of out a little bit more, which is why it's triggering a little earlier before I mouse over it. But that's how you go in, and it's just a different way. Instead of click, you can do it mouseover, you can do it dblclick, you can do it through a touch event, and you can cause these animations to happen. So we've been able to go in and apply some of what we've learned in this section to our demo project, and it's looking great. So now we're ready to move onto the next section, which is being able to trigger code after an animation completes. In this section, we learned about jQuery selector basics, being able to use jQuery to select objects on the stage, as well as how to use jQuery to add classes and have a little bit more control when we add those classes as well, and then remove those classes when needed. When we did not need the animation anymore, we could remove the class. And then even toggle the class to be able to say, okay if it's on, take it off, if it's off, take it and put it back on. So we've been able to use all those different classes inside of this section. And then we talked about jQuery events, being able to trigger the code when we want it to trigger, when it's clicked, when it's double-clicked, when a mouse is hovered, and different things like that. So we really covered a lot of ground here, jQuery being able to addClass, removeClass, toggle classes, and different events. There's a lot more that you can dive into jQuery. If you want to be able to control more of how things happen, then you might want to look into jQuery or might want to dive a little bit deeper into JavaScript. But in the next section, we're going to be talking about how we can trigger code when an animation ends.

Triggering Code After an Animation Ends Module Intro So one problem that we ran into with the toggleClass is it had to remove after the animation ended. We had to click one more time to remove the class, and then click again in order to animate it again. It'd be nice if the removeClass actually happened as soon as the animation ended. So that's where this section comes into play, being able to trigger code after an animation ends. Now there's a few things that you have to do to set it up before you can trigger that code. And there's some code you have to get from the Animate.css documentation before you can do that. So we're going to go get that code and apply it to our project before we can trigger some code to run after an animation completes.

Setting up Animation End Function Before we can run code and have code fire after an animation completes, we need to set up some of --- inside of the Animate.css documentation, we need to set up some JavaScript. You don't even need to know what the JavaScript does. But we at least need to set up some JavaScript, so we can then use that JavaScript and use the code itself to then fire when an animation itself is complete. What we're going to do is first of all, review the Animate.css documentation. Go in there, look at what the code is, copy and paste that code, and then go into add on code that detects completion. So we're in our project files. This is the project files we've been working with. We have our pageLoaded. We have a couple different animations. If we go into the js folder and then the interaction.js, we have these different jQuery events that will fire when the different buttons are clicked. But I'm going to add some JavaScript that even happens before the page loaded. So I'm going to bring that down a couple lines. I'm going to hit Save, and then I'm going to come into the Animate.css documentation. And so to get to the Animate.css documentation, I'm going to go down to where it says View on GitHub. This is the Animate.css website. And once we're on the GitHub documentation website, you can see where you can download the files. But if you scroll down, this is all the documentation for Animate.css. This is where you can see how to attach it to your project. You can also see the different types of animations listed out in one big list here. And so I'm going to scroll down until I see this section right here. Right here says you can also detect when an animation completes. What we need to do is we need to take this code and we need to copy that code, not the very last line. This is how I then detect the animation inside of whatever object that's actually being animated, but I just need that first code. Then I'm going to copy that, and I'm going to paste it. A couple things that you'll notice in here, and I'll explain a little bit of this, we have an animationEnd that will basically just fire, it's listening to when an animation itself is actually done. And then it has an animation here, it has an OAnimation, MozAnimation, and WebkitAnimation. So just like we learned about in the past when you're using vendor prefixes, this is also using those vendor prefixes to determine when an animation is actually complete. Now based off that, you don't need to even memorize what's going on here, but we're basically going to call some event and what's down here is basically going to call, okay, what code is actually going to run when this is done? I don't need to worry about that part yet. Let's just go ahead and copy this part. Let's go into our code, and let's come up here, and let's just paste our code right there and hit Save. That's all we need to do for now. We just need to have that code there so we can then determine when the animation completes. But we have to know which animation we're listening for, and we're going to do that in the next video.

Firing Code After Animation Completes All right, with the code that we copied and placed into our JavaScript from the last video, we're now ready to then fire a completion or to trigger some code when an animation actually completes. So what we're going to do is we're going to add on this next line of code. And we're going to say hey, section1, because section1 has the animation, we're going to say section1, and then we're going to use the jQuery one event. Now the one event is basically just listening for an animation. It's going to run this once, and we're going to listen for an animationEnd, which that kind of ties into the code that we've done before, we copied and pasted into our JavaScript. And then we're going to run a function. Now that function is basically going to be any name that you want. And so you can see , removeAni1, and Ani1 is essentially the function that I'm going to come up with. We're going to set up this event listener to listen for the animation. We're then going to create a completion function, and that function's going to have some code in there that will then remove the class when the animation actually completes. So after I've added the class, it's then going to remove the class. And I'm still going to have the toggleClass in there, so then the toggleClass basically just says okay, is the class on there? No? Then add it. If it is, then remove it. But it's not really going to remove it because we're going to do that when the animation completes. We're going to listen for the animation to complete, remove it, and the toggleClass is just going to say hey, well you can go and add the class. So if you wanted to download the sample files, we're going to go ahead and be in section 2. So open up the section 2 sample files. And you can start from here. I'm going to go into my code, and this code already has, if I go into the interaction.js, it already has the code that we copied and pasted from the last time. And I'm going to come down here, and I'm going to add on an event listener right under Section 1. Now you can do this under Section 2, Section 3, if you want to keep it a little bit more organized. But I'm going to go ahead and have an event listener. We're going to listen for what events? We're going to listen for the section --- make sure that is a dot there. And we're going to listen for section1, and we're going to use the one event, basically just saying that this is going to run once, and then we're going to say animationEnd. That is the function that's up here. When the animation ends, it's going to run that function above. And then we're going to say run the function, which will be called removeAni1 and end that with a semicolon. So now I need to create the function, removeAni1. I can do that right below here or I can do this outside of pageLoaded, however I want to do that, but I'm going to go ahead and say function removeAni1, open/close parentheses, open/close curly brackets, and there we go. I'm then going to come in here, and let's just add on an alert, just to make sure that this is working here. And so let's go back into our browser and see if this works. So the animation doesn't actually run until I click on the button here. But as soon as the button is clicked, the animation runs. As soon as the animation is done, it then runs this function. And you can see that the function has been successful because we have this alert called test. So I'm going to go ahead and close that out. Let's go back into the code. What we want to do is we want to remove that class. Right now, I'm not using a toggleClass, I am just going to use addClass. But I'm going to remove that class as soon as the animation is done. So I'm going to say section1, so .section1.removeClass, which we learned about in the last section. So we're going to call that jQuery function and we're going to say okay, what class are we removing? Well, it's pretty much the same class right here so I can just copy that, go in here, and paste that. So let's go ahead and preview this again. So I'm going to hit Refresh. So one thing I had to change --- let's go back into the code. One thing I changed, instead of just 1, which basically only runs this function once, I changed this to on. Essentially this will happen every single time that the animation completes. If it's just one, it will only happen once. So I want to make sure that this happens every single time, so I changed that to on. Let's go back into the browser here. Let's hit Refresh. Let's clear my cache, first of all, and then hit Refresh. And then I'm going to click on Animate Section 1, and you'll notice that the animation happens. If I right-click here, go into Inspect Element, you can see that section1 does not have the animated bounce class. If I go ahead and close that out and then hit Animate Section 1 again, it does bounce. But if I go back in and click on Inspect Element, you'll notice that it's not there. Because what happens --- let's go ahead and see if we can kind of adjust my screen here to see if we can see the code real quick. And we'll have to keep track of this. Right here where it says section1, you'll notice that the class does get added, but then it gets removed. So let's click on that. There's the animated bounce. You can see that it was added, and then it was removed. So that's how you can go in and you can remove the class. And so you really can get this true toggle format instead of having to click the button twice for it to run again. Every time I click on the Animate Section 1, it will bounce. So that's how we go in and we trigger some code when an animation completes.

Sequencing Animations So we've learned about how to actually trigger code when an animation completes. And what we've done so far is we've removed the class on the animation that just ran so we can then trigger that animation again. But what happens if you want to then trigger another object to move? So after one object is animated, I want to then animate another one, and then another one, and then another one. Well that's where sequencing animation comes into play. So if we trigger one animation, then that animation stops, what if we want to then move that object to another location? So that's where sequencing can help. And in this demo, what we're going to do is we're going to sequence some animations, and we're going to trigger an addClass for more animations after one animation has completed. So let's go into the code. I'm going to go into my JavaScript code. I'm going to come into the interaction.js here. I'm going to come down to where I've added a couple more classes. I've said okay, on button click, I'm going to go ahead and add a class of animated bounce. I did use the one. I'm actually going to change that to on for all of these. So let's go ahead and just change that, get rid of the e's for on, for one. And then let's save that. I'm going to come back in and preview it, just to make sure it's okay here. So you can see, I'll click it, that animation runs, click it again, the animation runs again. And the same thing with all of these different animations. But I want to have this animation run. I want to then have that animation run, that animation run, and then the final animation run as well. So let's go back into the code. So when the animation runs, we're basically just removing this animation, but I want to go in and after that animation is done, so after remove animation is done, I want to then add the animation for Animation 2. So I'm going to come up here where we add the animation for Animation 2 here, and I'm going to copy that right here where it says addClass for section2 animated shake. And I'm going to paste it right where it says inside of the removeAni1. It's basically going to remove the class of section1, and then it's going to add the class of section2. Now once this is done, it's then going to come in here and remove that class. We need one more thing. In order to remove, after that class has been done, we're going to come in here and say, okay section2. Once that animation is done, we're then going to remove that animation, and it's going to come down to this section. I would then need to come in here and say okay, now I'm going to do the same thing that I just did here with section3. And I can place that here. Let's go in a preview this just to see --- so it starts to make a little bit more sense here. I'm going to come in here and hit Refresh, and I'm going to run the animation, the first one. So you can see after the first one has completed, it then runs the second one. I'm going to hit Refresh again. So come over here, Animate Section 1, and then it animates section 2. Let's go back into our code. So let's do the same thing that we did here, and let's place it inside of removeAni2. And instead of section2, we're going to do 3 on this one here. And then we're going to then run removeAni3. And then do the same thing here for Ani3. We're going to then do 4 because we want it after 3, we want to run 4. So we're going to add the class for 4, and then remove the class for 4 as well. But we have a couple things mixed up. So you can see where it says here animated shake, we actually used the jello class for number 4. So I'm going to just copy that and paste it up here. And we used the tada class for number 3, so I'm going to copy that, place it up here just so we have the right class there. All right, so I'm going to hit Save here. Let's go back into our browser. Let's hit Refresh, and then I'm going to click on Animate Section 1. It's going to animate the first one and then the second one, then the third one, then the forth one. We've been able to sequence our animations one after the other. And it's been great so far, but it's taken a lot of code. There is a more simple way to do it, and we're going to learn about that in the next video.

Adding Animation End Functions So we've learned about how to sequence animations, how to run some code as soon as an animation is done, and then how to add on additional code to run another animation or to even remove the animation so we can run that animation again when a button is clicked. We're going to come back to our demo project, and we're actually going to learn about a different way to be able to sequence our animations. And it's a little bit less code. It might be a little bit more complicated to understand, but it is a little bit less code so it could actually just make things a little bit easier if you want it to. So in this demo, we're going to come in and remove the toggleClass, first of all. We added a toggleClass in our last demo of the actual demo project, so we're going to remove that. We're going to update the documentation code because the code that we're going to be using is a little bit different than what we had copied and pasted before. And then we're going to sequence the animations, and have these animations happen one after the other using this new updated code. First of all, let's come into our code. Let's remove where it says toggleClass. So I'm going to come in here and remove all of those. And let's not worry about the phone for now, so I'm going to go ahead and just delete the phone one. So I'm going to go in to Animate.css's documentation, and I'm going to grab the new updated code that we need. So let's go into our browser. And I'm going to come in and instead of the one that I had copied before, I'm going to come down here to the next one. It says right here, so you can also extend jQuery to add a function that does it all for you. I'm going to copy of all that, and it is more complicated code. But once we start to actually animate in some stuff and to sequence some stuff, it actually becomes a little bit easier. So I don't even have to know what this does exactly. So I'm going to copy that. Let's go into our code. And we're going to paste this above the pageLoaded function. So there we go. So that's just the code that needs to happen, that needs to be there, that's going to listen for it. And now we're going to come into our function. After we've removed all of our toggle classes, we're going to come in here and we're going to, on the button click, we're going to say use our jQuery selector to say .section1. Now you'll notice sometimes I use double quotes, sometimes I use single quotes. There really --- I mean, some people like to have all double quotes or all single quotes. I really kind of go back and forth. It doesn't affect the code too much. But here, instead of adding class, what I can do with this function, that code above, instead of adding that class and then removing the class or toggling the class, what I can do is just say okay, .animateCSS, which is actually two lowercase s's there, which is the function right here, animateCss. And we're going to call that function. And then I'm going to pass in a parameter. So I'm going to say the first parameter is going to be bounce. And so that's all I'm going to do for now. So really, I've simplified the code. Instead of adding on the class of animated and bounce, I just need to say okay, go into this animateCss function, pass in the parameter of bounce, and there we go. So let's save this and preview it. Let's go back into our browser. And here is my sample course up here. I'm going to go ahead and come down here and click on where it says Step 1: Ingredients. Oh, I forgot to come in here and remove these. Let's go remove these animations first of all. I think that might be throwing it off. So I came into my index.html, and I'm going to remove some of these animations in the different sections here. Now I'm still talking to section1, so let's go ahead and come back into our browser, hit Refresh. Now if I click on it, you'll notice that it bounces. But the nice thing this is it's not --- I didn't have to toggle the class at all. If I keep clicking on it, it'll keep bouncing it because that function that we copied and pasted above will take care of that for us. You'll notice that as soon as the animation completes --- so the animation will run, but as soon as it completes, it's now removed that animated, and it removed the bounce as well. But that's not all you can do. You can actually come into the interaction.js, and you can add, after the bounce, you can actually add a function. So I can come in here and say , function, and then open/close curly brackets. We're going to run a function after the animation is done. So inside of the curly brackets, I'm going to say Hello! Let's go ahead and save that and go back into our browser here. I'm going to close out my Inspector, go ahead and hit Refresh, and then click on this. You'll notice that it bounces, but then it also runs the code. So I didn't need to add anything, like an additional line of code that says on this animationEnds, then run this function. It's all contained in that one line of code. So if I then wanted to run another animation, so let's go ahead and just say dollar sign, let's then run section2 .animateCss. Then let's pass in, let's just do bounce for now as well. And there we go. So after this is done, it's going to run this function, which is basically then going to bounce in the other sections. So let's go ahead and save that. Go into our browser, hit Refresh. Now if I click on the first one, it's going to bounce, and then it's going to bounce the second one. Well what happens if I want to bounce the third one? Well we just add another function to section2. So let's go into the code. And so you can see right here, after that bounce, I just type in the same thing I did before. So function, open/close curly bracket right before the last parenthesis, and then I can come in and do section2. So I'm kind of nesting it a little bit. So I'm saying section1 is the parents, then section1, then section3, then section4. And so it's just a little bit easier of a way to be able to animate and sequence animations. And you can see that it was all done within this one function. I didn't need to have functions everywhere else. It basically just handled it right here. So in summary, what we've done in this section is we've set up animation and functions that will run code as soon as an animation is complete. We then fired the code after the animation completes, and then we started to sequence animations. Okay, once this animation is complete, then go in and sequence or fire this other animation. But then we also used the documentation to actually make it more simple to code the sequence. And so we grabbed the other code that then allows us to simplify how we add on animations without having to do addClass or removeClass or toggleClass or anything like that. So that is a couple different ways that you can fire code after an animation completes. In the next section, we're going to be talking about how you can actually go in and build your own animations. So you can take what Animate.css has already done, and you can go in and build upon it or even create your own.

Custom Built Animations Module Intro We've covered a lot, and now we're going to actually go in and cover how to build some custom animations. So Animate.css basically just uses regular CSS animations. So if you're familiar with CSS animations, you can go in there, you can adjust some of the existing animations, or you can go in and basically create your own custom animations. And we're going to talk about that in case you wanted to extend it and go beyond what's there available by default.

Customizing Animate.css Default Animations All right, so we're going to talk about customizing Animate.css default animations. Before we go into the code and we start looking at what the code is, I wanted to cover what CSS animations is. It can get pretty complex, and so we're just going to kind of go off the default or some of the basics before we go in and take a look at what Animate.css has done. CSS animations, if you want to learn more, you can dive in by going to W3Schools or you can just go to Mastering CSS Animations, which is another course inside of Pluralsight here. So you can search for Mastering CSS Animations, and that will give you more in depth if you wanted to learn about the animations that you can do in CSS. And then once you learn that, you can come back into Animate.css and you can add on your own animations or you can tweak some of the existing animations as well. So a sample of CSS animations is inside of CSS, you have to set up basically keyframes that say okay, well I'm going to create an animation called example. Now in this example, the animation itself is going to go from the background color of red to the background color of yellow. So we're setting up a from, and then we're setting up a to. It's going to go from this, and then we define the different properties and values, which in this case only has one property and value, which is background color. And it's going to be red. And then it's going to go to another property and value, which is going to be background color, and it's going to be yellow. Now you can pass in other properties and values if you want it to also do the position, you want it to do the location, you want it to make it go the scale, you want it to go larger, you want it to go smaller, you can do all that. So you have to set up the animation first. And then inside of your class, you then go in and apply that animation. So you go in and say animation-name, and then you give it the name of the same animation that you did, so in this case it would be example. And then you can pass in other stuff like we did before of animation-duration and then animation-delay, different things like that. But you have to set up the animation first, and then you have to call the animation when you apply it to your div tag. Those are two important things to keep in mind. When we start looking at the Animate.css code, keep that in mind. You have to set up the animation, then you have to set up the class that has that animation applied. So let's now go into Animate.css and take a look at how it's set up.

Building Your Own Animate.css Animation Okay, so now we're going to explore building our own custom Animate.css. There's a couple things that I'm to say to keep in mind as we go through this. The first of all that would help, especially if you're not familiar too much with CSS animations, is to start from an existing animation and then start tweaking some things here and there. Now you need to rename that animation. So you're going to copy that animation, and then you're going to paste it. I don't recommend changing the original animation. I recommend copying it and giving it a different name, and then placing that towards the bottom of the code. Because if Animate.css comes out with a new version, you know where to go in and download the new version, and then you can copy your custom code into the new version without touching all of the original code or anything like that. And then once you've renamed your animation, you go in and you modify that animation. You tweak some of the different values, the properties and values to really affect however you want it to affect, and go in there and create your own custom animation. So let's go in and we're going to start out in the 02, if you download the demo files, go into the 02 folder. And this is the project we're going to be starting with. And it's basically just left off from what we did before. As soon as one animation starts, then it will trigger another animation, so we're good there. But let's come into the project files, and we're going to go into animate.css. I'm going to double-click where it says animate.css. And I'm going to go through a couple of these different animations. So you'll notice, first of all, we have this webkit-keyframes, and then we have bounce here. So this is the name of the animation. It's going to start out from 20%, 53%, 80%, and then it's going to go to, and then it has some of these more custom animations right there. Now again, that's a little bit more complex than you probably need to know. But at least knowing that it always has this to and then from, or from and to, allows you to go in and see what it's doing here. And you can see this cubic-bezier curve, this is basically an animation. It has a couple different values that it's passing in, in order to complete that animation. Now there's other ones that are a little bit less complex, like this bounce one right here, or actually this flash one is little bit less complex as well. But you can see the bounce, what we did first of all, or what Animate.css did, is they went in there and created the animation, and then they created the class that then animates or uses that animation to then animate. So it's says webkit-animation-name bounce, and goes in and grabs that animation, and then comes in there and does it just for animation-name. This is basically just taking care of the WebKit and taking care of other browsers as well. So the flash one is a little bit less complex. It basically just says it's going to start from 50%, go to 1, then 25, then 75, and it starts to kind of flash there. So looking through these different animations, you can see it kind of makes sense a little bit more of what's happening here. But this really allows you to go in and even tweak some of the different values here. So what I'm going to do is I'm going to find an animation that says slideInLeft, and we're going to grab this animation. So I'm going to take that and I'm going to copy the animation, both keyframes here, and also the class there where it says slideInLeft. And I'm going to come to the very bottom of Animate.css. And this is where I'm going to add all my notes. I don't want to affect anything above that. I'm going to go ahead and add a note here that says Custom Jeff Animations. All right, now I'm going to paste that. And I'm going to come in here and I'm going to give this a different name. So instead of slideInLeft, I'm going to say slideInJeff. Let's just have that there. I'm going to copy that, paste that, you can name it whatever you want in this case, and then I'm going to come down and say the class is going to be slideInLeft or slideInJeff there, and then we're going to pass in these animations that we've done. Now from here, what I'm going to do is instead of -100, I'm actually going to say, let's just say -70. So it's not going to be completely off the screen when it starts to animate. So I'm going to change that. Everything that says -100, I'm going to change to -70, come down here, and then also change this one to -70. Now you'll notice that there's pretty much two different things that do the same thing. This is to attack all of the different browsers that are WebKits. This is to attack every other browser there. And so it's just basically handling it in either way. And so you can see here webkit-animation is going to be called slideInJeff, and then animation is going to be called slideInJeff as well. So instead of it being completely off the screen and this sliding in, it's going to start at 70%, -70, and then slide in from there. I'm going to hit Save, but I'm going to copy this class. And I'm going to come into my index.html file. And so we're going to actually go into the JavaScript because in this example, we're adding the class when that button is clicked. So instead of bounce, I'm going to come in here and just paste where it says slideInJeff. And it's just going to then animate. As soon as the animation is done, it's going to then animate the next object. That's okay. I'm just more worried about this actually animating in. And so let's go ahead --- actually come into removeAni1, and we're going to, instead of bounce, remove slideInJeff, just to make sure that we basically have those two different --- well, I don't need it on the second one because I'm only applying it to section1. I just basically want to make sure that it's removed from after it's done animating there. All right, so let's go into our browser. Let's go ahead and hit Refresh there. And then I'm going to click on Animate Section 1. And you'll notice it does not completely start off the screen. That's because I started it at -70 instead of -100. You may not want exactly that, but that's just showing you how you could go in and how you could customize. If you're more familiar with how to do CSS animations, you could actually go in there and do some pretty complex stuff. Or you can go in and say okay, that's not exactly what I wanted, that bounce, I want to go in and modify it a little bit, maybe add some opacity or anything like that. So if you really want to learn about being able to do CSS animations, I definitely recommend you either check out W3Schools or go into the Pluralsight course, Mastering CSS Animations. So in the next video, we're basically going to wrap up this section and go into our demo project and apply a custom class to our demo project.

Adding Custom Animation So we've learned how to create our own custom animation or to at least start from an animation that's there and just kind of tweak it a little bit. So we're going to do the same thing to our demo project. And so we're going to come in and we're going to duplicate an existing animation, we're then going to rename that animation and copy and paste it to a different section in our Animate.css, and then we're going to apply that animation to the object. After we're done with that we'll come back in here and just kind of wrap up a summary of what we've learned. So this is our demo project, and I'm going to go ahead and hit Refresh here. And you'll notice that the Cooking 101 comes in from all the way on the other side, and then it just ends up right in the middle, and that's fine; however, I don't think it needs to completely be off the screen. I just want it to slightly move into place. And so let's come into our code, and let's go into where it says the Cooking 101. And you can see it says fadeInLeft. And so I'm going to go into Animate.css, and I want to create a fadeInLeft, or a similar one, and just modify the code a little bit. So let's come into Animate.css, and let's search for fadeIn. I did not copy the fadeInLeft there so I can search for it, so Cmd+F and then paste that in. And now, I can copy and paste that over down towards the bottom here. And make sure you get the class, you make sure you get all the keyframes as well. And so let's go ahead and jump to the very bottom. And so let's add a note that says Custom Code. And so let's go ahead and paste that. And instead of fadeInLeft, let's actually name it slightFadeInLeft, because we just want it to just barely kind of move over. So I'm going to say slightFadeInLeft, and make sure that all these different sections have this slightFadeInLeft. Come down to the bottom, that has a slightFadeInLeft, that one does as well, and that one does as well. All right, so that is the new name of our class. We need to use this slightFadeInLeft on the text that animates in. So I'm going to come into index.html, and I'm going to paste, where it says fadeInLeft I'm going to paste in this slightFadeInLeft instead of the other one before. Now the reason why I don't use the minified version of Animate.css is so I can do this kind of thing. Now once I've created my custom code, then I can go in and I can minify this code so it loads a little bit quicker. But I like to have the original code. You could unminify the minified version and then minify it again, but you might as well just start from the unminified version, come in here, create your custom ones, and then go in and minify it if you want to as well. So we've applied that. Let's go ahead and just see how this looks. I'm going to come into the browser, and I'm going to hit Refresh. Oh, we forgot to actually adjust the code, so it's still coming in from the exact same position. So let's go back into the code. And let's go into animate.css and instead of 70, we're actually going to do, let's just do 20. I just want it to move over, just very slightly. So we're going to do -20, and it's going to go to 0 basically where it starts from or where it was designed. So we're going to say -20, and there we go. So I'm going to now go back into the browser. Now let's hit Refresh, and you'll notice it just kind of slightly moves over. So it doesn't completely move from off the stage, it just does it very slightly, and I like that effect a lot more. So that's how you can go in and modify the existing Animate.css. So to wrap up what we've learned, we've basically been able to go in and see the basics of CSS animations. We've been able to build our own animateCss class. And then we added that to our custom animation project. And so we instead of having to completely animate in from the left, we just added a class called slight animate in from the left. So hopefully that helps you see how you can go in and customize a little bit of Animate.css and get the animations exactly how you want them. So we're almost done. We're just basically, in the next section, going to wrap up a few things with our project, talk about how you can upload it to a website, and then we're going to be done with this course.

Conclusion Module Intro So we've made it, pat yourself on the back. We've gone through, we've learned about the basics of Animate.css. We could've stopped there, but we went in and we learned how to add on our own triggers. We learned how to add classes, remove classes, how to trigger code when an animation completes. We also learned how to create our own custom animations as well. So we have learned a lot. So I highly recommend you go back in and you review these sections as much as possible. But we're going to wrap up in this section, and then talk about a few references and different help files that you can go in and take a look at to learn a little bit more. So let's go ahead and just wrap up everything in this course.

Where to Go from Here Animate.css is great, and we've learned a lot. We've learned how to adjust some of the settings. We've learned how to trigger the Animate.css to be able to add classes, remove classes at certain times. We've also learned about how to go in and even use some of the custom Animate.css to just fire some class when an event is clicked on and to sequence classes as well, and even how to create our own custom class. But where do you go from here? If you've mastered Animate.css and you've done everything that you can with Animate.css, and you even want to get to more details of how to control animation or to even go beyond what's available inside of Animate.css, there's a couple different libraries that I would suggest that you explore. Number one is there's a library called Scroll Magic. Now Scroll Magic allows you to trigger events when a user has scrolled down to a certain area. You'll notice that I had to refresh in order to --- when I scrolled down to different sections, I had to click on refresh to see some of the animation. That's because the animation or the objects were below my scrolling area because I'm on a very small screen here. But if you want it to trigger animations once a user has gotten to a certain area, well using something like Scroll Magic would allow you to do that. Another thing is if you wanted to go more in depth and even create drag-and-drop animations, other things like that, well you may want to check out something called GreenSock Animations. And I know that Pluralsight has courses on GreenSock, so you may want to check that out. And the final thing is just really dive into CSS animations. Go take the course on Mastering CSS Animations, and see how you can go in and you customize that even more. Now you really don't have to do any of these. This is essentially saying okay, if you want to go more in depth and you wanted to have even more control over your animations, so these are some of the things that I would recommend to up your skill level and to take it even further.

Resources So let's talk about resources. What else can you do or what resources can you use when you're working with Animate.css? So the first resource that I've already mentioned throughout this course, but I definitely want to recommend it again, is W3Schools. Just being able to pull up W3Schools and have the code hints right there or even say okay, what are the basics of CSS animations? Well let's look it up in W3Schools, and it has the code, you can see exactly kind of the basics of getting started with it. Start with that and then adding on additional ones through the W3Schools there. But the Mastering Animations CSS course would allow you to really go in and dive deep into CSS animations. So you can go in and create your own CSS animations, and then use basically Animate.css as your foundation. And you can then share the custom animations that you've done through the Animate.css framework. You care share that with somebody else. You can tweak some of the basic animations as well, and you can adjust some of that and kind of share that. And then have other people attach the CSS animations to their own projects that they can use. And then the final thing is really just dive into jQuery basics. We only covered just basic things in jQuery like addClass, removeClass, and then events. We didn't really cover anything else beyond that. There is a lot more that you can do with jQuery, and you can then trigger these different classes at certain times. You can do it based off of orientation. You can do it based off of touch, based off of swipe. So there's just a lot more that you can do with jQuery that would take your animations even further. So I highly recommend finding a course in Pluralsight for jQuery basics. So those are some of the main resources that I would use to go even further and just make sure you have the W3Schools pulled up. That would just give you that documentation right there as well. Go into Animate.css's website and then view the GitHub and look at the documentation there as well. We covered everything that's pretty much in that documentation, but just for reference if you wanted to just take a look at the list of different types of animations. So those are some of the resources that I would recommend, and in the next video we're going to wrap up the course.

Conclusion We made it to the end. Congratulations, you were able to go through the entire course. Hopefully you have a better understanding of Animate.css. And I first of all want to thank you for going through and taking this course. If you have any constructive feedback, please leave that feedback. I do like to know how I can improve and what other examples you would like to see inside of the course. So we're going to wrap up with a few kind of final thoughts, and then talk about some of the other things that we've learned about as well and kind of wrap up this summary here. So first of all, in summary we learned about the Animate.css basics. We learned about changing some of the animation settings and that was the delay, that was the duration, the iteration count as well. And then we learned how to customize a little bit more using the jQuery event listeners. And so when a button is clicked, how we can actually trigger some jQuery to remove a class, to add a class as well, to toggle a class. We also learned about how to trigger code at the end of an animation, and that was using some of the Animate.css JavaScript as well, and then even how to create our own custom animations. That was still scratching the surface a little bit, so I recommend, or gave some recommendations, of where you can go to learn a little bit more. But I want to leave with this last word of wisdom here, and this comes from Spider-Man, so with great power comes great responsibility. The reason why I say that is just because you can animate does not mean you should go crazy with your animations. Keep it simple. Keep it in the right spot. Whatever you can do to even simplify some of the Animate.css effects as well to make it even just like more classy, just make sure that you do that. Don't just animate everything just because you can animate everything. That is the power that I'm talking about. With great power comes great responsibility. So use your animations responsibly, and just go in and --- I sound like my mother when I talk about that, but just go in and use your animations responsibly. Keep it professional. Keep it simple as well. And that will just make your website stand out even more. So just wanted to leave you with that final thought and say, again, thank you for taking this course.

Course author

Jeff Batt Jeff has 10+ years experience in the digital learning and media industry. Currently he is Founder and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software...