Easy CSS3 animations with Animate.css

In previous chapter we learned how we can utilize animate.css as animation framework that works out of the box. In this chapter we will see how we can use jQuery magic to work for us in an awesome way.

Adding animations dynamically

Lets start working on our example 1, we will add some CSS animation on our button click event, to start with let's use our container div as shown below

<div class="btn">
     I will shake on click 
</div>

By itself it won't do anything specific, so lets make use of jQuery library to add some magic to it. Make sure to include jQuery in your page using script tag as shown below

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now lets write a jQuery function to handle click event for our button.

<script>
    $(".btn").on("click",function(){
          $(this).addClass("animated shake");
    });
</script>

and thats pretty much what you need. Result will look something like this

This was good but let's go a bit more advanced and see how we can add some more animation only when DOM element is visible on viewport, What we mean is that if page is too long and you only want to apply an animation when user scroll to the point where that element exists.

Let's try to do just that. We will make use of a jQuery plugin called jQuery Appear

First we have our DOM element which will be animated in a bit

<div class="container">
    I will get my animation when I am visible on viewport
</div>

Now we make use of appear plugin to make our animations click

$(".container").appear();
$(document.body).on("appear",".container",function(){
    $(this).addClass("animated flipInY");
}); 
$(document.body).on("disappear",".container",function(){
    $(this).removeClass("animated flipInY");
}); 

Result will look like this

And there you go, an animation to a DOM element when its visible on viewport.

Next chapter will contain useful resource and conclusion to this tutorial. Be sure to check that out.