Getting Started with Animate.css
Cool animations and clever microinteractions are all the rage right now. However, most developers know how long and tedious it can be to constantly write and rewrite CSS animations. It can start to feel like you’re reinventing the wheel. Wouldn’t it be nice to have a library of common animations that you can pull from anytime for any of your projects?
Enter Animate.css
A collection of “just-add-water CSS animations” created by Daniel Eden
With Animate.css, you can easily animate any element with only one line of code. But, if you need to get a little more fancy, it also offers quite a few customization options. In this tutorial, we’ll learn how to use Animate.css by building a one page website. Let’s get started!
Getting Started
There are two ways to get up and running with Animate.css. The first way is to download it from the official website. Once you’ve done this, all you have to do is add it to your project folder and link to it in your HTML.
Note: Animate.css contains only one file! This minimizes load time and keeps everything simple.
<head>
<link rel=”stylesheet” type=”text/css” href=”animate.css”>
</head>The second option for getting started is to use a CDN. You can find this here. Once you’ve got it, you can link to it just like before:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
</head>And, that’s it! No more setup is necessary to begin using all the awesome animations that come with Animate.css. All we have to do now is add some water…
Static Animations
The first thing we will do is a simple static animation that activates right when the page loads. Obviously, this animation will have to be at the top of the page — unless it repeats over and over. So, we’ll start off with a full screen hero element and animate the text inside when the page is loaded. Here’s the basic HTML we need:
<header>
<h1>Animate.css</h1>
<h2>Level Up Your Websites with Animate.css</h2>
</header>Now, all we need to do to animate the two headings is give them the animated and bounceInDown classes. The first class is necessary to use any Animate.css animation. But, the second class is just one of many options we could use here. The official Github docs have a full list of animations you can use.
<header>
<h1 class="animated bounceInDown">Animate.css</h1>
<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
</header>This is nice, but we can definitely expand on it. Let’s add an arrow at the bottom of our hero that bounces continuously to let the user know they can scroll down. We’ll give this element two classes: animated and bounce.
<header>
<h1 class="animated bounceInDown">Animate.css</h1>
<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
<span class="animated bounce"></span>
</header>As we have it right now, this animation will only happen once. However, there are three CSS properties you can use to control this animation. They are:
animation-durationanimation-delayanimation-iteration-count
For our purposes, we only need to use the first and the third to slow down the animation and make it infinite. Thus, our final markup for the first section look’s like this:
Note: Most of the CSS in these examples has been omitted for the sake of clarity. Check out the full demo for the arrow styles, etc.
<header>
<h1 class="animated bounceInDown">Animate.css</h1>
<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
<span class="animated bounce"></span>
</header>And, here’s the CSS that makes the magic happen ad infinitum:
/* Make sure to use the animated class in your selector. Otherwise, the animation-duration won't work */header span.animated {
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
And, here’s a pen showing it all in action:
As you can see, it’s super simple to do these static animations. In the next section, we’ll add some complexity by using jQuery to dynamically trigger Animate.css.
Scroll Animations
The first type of dynamic animation we’ll look at is a scroll animation. With a little bit of jQuery we can check to see if an element is in the viewport. Then, all we have to do is add our Animate.css classes to it. We’ll use three blocks of text, each with an icon, to demonstrate this. Here’s the markup:
<h2 class="new-section">Scroll Animations</h2>
<div class="scroll-animations">
<div class="animated">
<span>☎</span>
<h3>Number One</h3>
<p>Lorem ipsum...</p>
</div>
<div class="animated">
<span>♫</span>
<h3>Number Two</h3>
<p>Lorem ipsum...</p>
</div>
<div class="animated">
<span>☂</span>
<h3>Number Three</h3>
<p>Lorem ipsum...</p>
</div>
</div>Now we can use jQuery to check see if the elements have been scrolled into view. In the code below, we are using the distance a user has scrolled, the height of the window, and the element’s offset from the top to calculate this. For further explanation, you can look at this question on Stackoverflow. We then use the scroll event and this function to add the class fadeInLeft to our elements.
/* Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling */$(document).ready(function() {
// Check if element is scrolled into view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// If element is scrolled into view, fade it in
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInLeft');
}
});
});
});
Once again, that’s all there is to it! All we need is a simple scrolling function to add our classes to the text blocks to create slick scroll animations. And, Animate.css does the rest. Here’s our updated pen with the static and scroll animations:
Now let’s turn to animations triggered by a click event.
Click Animations
To illustrate click animation with Animate.css we’ll create a contact form. When the form is submitted, we’ll use some jQuery to check it for empty inputs. If any of these are empty, we’ll give them a red border and shake them to let the user know they missed something. Here’s the basic markup for form:
<div class="click-animations">
<h2 class="new-section">Click Animations</h2>
<form>
<input type="text" placeholder="Name" id="name" />
<input type="text" placeholder="Email" id="email" />
<textarea rows="7" placeholder="Message" id="message"> </textarea>
</form>
<button>Send</button>
</div>Now many of you might be thinking, “Wow, this painfully easy! All we have to do is add the classes we want when the button is clicked just like with the scroll animations!” However, in this situation there’s a little bit of a caveat. With the scroll animations, we only needed them to run once after they had been scrolled into view. They don’t keep fading in every time they’re scrolled in. But, in our present situation, we want our inputs to shake every time the button is clicked. Here’s an example of this problem:
Notice how the inputs don’t shake after the first time. This is because they already have the classes animated and shake. So, we need some way to remove these classes after the animation ends. Then, we'll be able to re-add them later. Once again, Animate.css to the rescue! With the following JavaScript, we can check for the end of our animation and then do something about it.
Note: The .one() method is essentially identical to the .on() method. You can read more about its nuances here.
$('#myElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
// do something
});Now that we have this nifty jQuery method, let’s go through the logic of what we need to happen.
- We need to check for empty
inputswhen the submit button is clicked. - If an
inputis empty, we need to give it the classes.animated,.shake, and.form-error(this last one is for styling theinputborder). - Finally, we need to remove these classes when the animation ends.
To accomplish these three goals, we’ll create an ‘on click’ function with if statements to validate each form element. We'll also use our event listener, so the animations can be run over and over again. Putting it all together, our JavaScript will look something like this:
// Click Animations
$('button').on('click', function() {
/* If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat. */ // Check name input
if ($('#name').val() === '') {
$('#name').addClass('form-error animated shake').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated shake');
});
} else {
$('#name').removeClass('form-error');
} // Check email input
if ($('#email').val() === '') {
$('#email').addClass('form-error animated shake').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated shake');
});
} else {
$('#email').removeClass('form-error');
} // Check message textarea
if ($('#message').val() === '') {
$('#message').addClass('form-error animated shake').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated shake');
});
} else {
$('#message').removeClass('form-error');
}
});
Bear in mind that the class .form-error just creates red borders around the input boxes. You can check out the live demo to see this in action. And, that's about it for click animations with Animate.css. Obviously, we've only scratched the surface of what you can do with JavaScript and these awesome animations, but I'm sure your head is already buzzing with ideas for upcoming projects. Here's an updated codepen showing what we have so far:
As a final bonus section, I’d like to take a quick look at some really funky animations that Animate.css has in its library. I’m honestly not sure if these could ever be used in a production site, but they’re kind of fun to tinker with!
Funky Animations
If you navigate to the official Animate.css site, you’ll notice there’s a category of animations labeled “special.” There are several effects in this category, but right now, I want to take a look at hinge in particular. You can use this animation just like any other one in the Animate.css library, but it's definitely unique. It's probably easier to show rather than explain what exactly it does. So, check out the GIF below:
In the example above, all I’ve done is add an animation for each time the text is clicked — just like before. It’s also worth noting that using this animation takes some extra code to use properly. This is because the hinge effect uses its parent container as a reference for the swinging motion. Thus, if you leave the element you want to animate "out in space," part of the animation may happen off screen. Here's the last bit of code.
Note: This code is pretty much identical to our other “on click” animations.
// Activate hinge effect when h4 is click in last section
$('.funky-animations h4').on('click', function() {
$(this).addClass('animated hinge').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated hinge');
});
});Here’s a link to the finished project with all the bell and whistles:
Conclusion
And, that about wraps it up for our tour of Animate.css! Let’s recap what we’ve gone over:
- First, we learned how to get up and running with Animate.css
- Then, we took an in-depth look at three different types of animations: static, scroll, and click
- Finally, we experimented with some of this library’s funkier (and significantly less useful) effects — just for giggles
I hope you enjoyed this guide (my first!) and are beginning to see all the clever ways this library can be implemented in web design. If you have any questions or comments please feel free to leave me a note in the comments.
Originally published on Scotch.io.
