2.4 Animate.css

In the last lesson we created a nice slide out menu with CSS Transitions. At this point you might be thinking that anything you might need done can be accomplished with CSS Transitions, but that's simply not true. In this lesson we'll look at Animate.CSS, a library which is packed full of amazing handcrafted CSS keyframe animations. So first, let's open up a browser. And, we'll just Google for animate CSS. And, the first result is accurate. Now, Animate.css uses key frame animations, to animate. So, we can do things like this and that. It even has entrances and exits. [BLANK_AUDIO] And some special animations. [SOUND] [BLANK_AUDIO] Now you might be thinking, when would I actually use these? Well. [BLANK_AUDIO] On my grid frameworks website Jeet.gs, you can see all kind of them. As you scroll down, things fade in, fade up, span, slide in from the sides, tilt up, all kinds of cool stuff. And it just makes for a nice neat little effect, give your site a little bit more life. So let's learn how to do this effect where as you scroll down, things will animate in. And we'll do that right now, so. To hide all that stuff we'll create a new folder here called Animate.CSS. Scroll down. And we'll just drag that into Sublime Text. Go ahead and create our index file here. Our boiler plate. [BLANK_AUDIO] And say hello world. Save that, create our CSS dot or our CSS folder with style.style inside of it and we'll give that H1 a background red just to make sure it is working correctly. Link it up here. Style.CSS. Cuz remember it's gonna compile into CSS. Open up terminal. CD to our Desktop. CD to our project folder. CD to CSS. Stylus. Auto pre fixer stylus. Watch style. You should be a pro at this by now. So, open that up in a browser and sure enough, it works. So now, in order to use animate.css we have to include it into our page somehow, right? So, let's go to our browser. Just download the actual file, open it up, and here we have the whole animate.css file. Let's go ahead and take a look at this. So everything that you animate gets the animated class. So if we wanted to animate this h1, it would have to have the animated class on it. You could add the infinite class onto it to have the animation repeat infinitely. You could add the hinge animation onto it to the hinge class onto it, to change it a little bit. And then you can see all these key frames with all the vendor prefixes on them already. And they're using the cubic bezier easing style, so if you want we can open up here and go to cubic-bezier.com. And we can see what some of these look like. So, if we wanted, we could drag this out. Drag that up. And this is our bezier easing right here. So you see how that slows down in the middle. So it jumps up real quick, slows down in the middle, and then goes fast again. Well, the creator of the animate.css library has gone through a lot of trouble to make sure that all these beziers actually look like the effect that they're trying to replicate. So this bezier actually looks like it's bouncing. [BLANK_AUDIO] And then it creates a bounce class which, where it just specifies the animation name here of bounce. And that's pretty much all it is all the way through it. There's just a lot of work put into it, it's a huge, huge file. [BLANK_AUDIO] So, we'll close that and since we're not gonna be using the source file directly, what we can do is just go to cdnjs.com. And then, search for animate.css and there it is. So we'll copy that. And it's a CSS file, so let's put it up here at the top of our HTML file. We'll prefix it with HTTP protocol so we don't have to fire up the local server or anything like that. Let's close out some of these windows here. So now, if we refresh, nothing happens. But if we save balance onto there and refresh, just like that we've got animation. Now let's say we wanted this hello world header to slide in as we scroll down the page. How could we do that? Well, first we have to find an animation that looks like something that slides in. So, let's go ahead and open up animate.css's website again and let's look for something that slides in. So, maybe under entrances? Bouncing entrance, bounceInLeft. Okay, so bounce in the left slides in from the left. You can't see it and then so, it's like all the way off the screen over here. As we animate it it comes in, so we can use that. So we'll say bounce in left and save and refresh. Okay, cool. But we wanna go ahead and set this so that we're not able to see it first, right. So we need to figure out what bounce in left is animating. So if we look at the animate.css file again. We can just search for bounce and left. And here is the animation. So first its translating the x axis negative 3000 pixels. So what we can do is create a class that will do that translation for us. [BLANK_AUDIO] So, let's call this class offToLeft. And just save it. [BLANK_AUDIO] offToLeft. And say, transform, translate x negative 3000 pixels. So now this should put the header all the way off to the left by 3000 pixels to start off with. But where it's got that bounceInLeft class applied to it, it's automatically gonna run, so we won't be able to tell the difference. So, let's go ahead and get rid of this bounceInLeft class. Save, okay, so now if we inspect element, find this H1, and it's way, way over here. We'll never be able to see it, so. But we know that it's there. We know that it's just off the screen over here somewhere. Now what we need to do is add some JavaScript. So we'll come in here, and at the bottom of the page. [BLANK_AUDIO] We'll add jQuery, so let's search Google for Google CDN jQuery. Find Google hosted libraries, scroll down a little bit to jQuery, and. [BLANK_AUDIO] Grab this 2.x snippet. And we'll paste that in there, and again, just give it the HTTP protocol. Save, and let's create our own script here. So we'll put it in the JavaScript folder and again, we'll call it main.js. So now we need to create that folder. We need to create main.js. So inside here, let's go ahead and create a function. [BLANK_AUDIO] Now, we're going to say whenever the window scrolls, so whenever somebody actually comes over here and scrolls up and down, we're going to put a function in there. And we're going to say, if window scrolltop, so this says the, the scroll top position, so how far they've scrolled down the page. And, we'll just say, if it's greater than one, so if they scrolled at all, then we want to say that H1 remove class off to left. So we're taking away the class that's hiding it. And then we're going to add class bounceInLeft. So if we save that, come over here and refresh we don't have a way to scroll yet because the page isn't that long, so let's come over here to our style sheet. Say HTML type 2000 pixels, save it, now refresh. Now if we scroll just a little bit, pops in. Cool. So that's how you accomplish that effect. If we, like if we want to put all these elements down further and have multiple elements we'd do the same thing throughout the page. And there's better ways to do this, and we'll go over there, those in a later lesson. So, so in this lesson we learn how to animate things into view using animate.css and a touch of JavaScript. In the next lesson, we'll get into one of my favorite things to animate, SVG parts.