Making Awesome Animations using Animate.css and Wow.js

In a recent project I had to apply some “stunning effects” to some items on one of the views. Then I asked a friend who pointed me to the direction of Animate.css and Wow.js.

Funny enough I have seen these two guys in several templates I’ve used before now, but I know now how they work, all I know is that they are in the template and what I am using the template for is working very fine.

Do not hesitate to ask people around you for help, you know not who has the answer to your biggest question!

Five months back, I don’t try to know the cause of a disease, all I wanna know is the disease and how I can get rid of it in time — metaphorically speaking of course, but in the last three months, I’ve been venturing into knowing the “why” and “how to” of a lot of things.

Believe me I asked myself first when I was asked to do this thing, that, “How am I going to bring a MS Powerpoint animation in this project?” But then I asked the next guy and he has the answer! Without wasting time I headed down to reading the WowJS documentation as well as the Animate.css’s website and Github repository.

Wow.js is very friendly with Animate.css. All you need do to use both in your project and get amazing animations for any of your items is just to include Animate.css like you do every other CSS file and Wow.js just like you do every other script.

<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Wow.js -->
<script src="js/wow.min.js"></script>

After including both, then you need to initialize Wow.js to be able to use it in your web page(s).

<script>
    new WOW().init();
</script>

Preferably let the lines above be immediately after you included the Wow.js script and so after the initialization, you are set to go! Fire away, Titanium!

Reveal an element

In order to reveal an element, you simply need to add a “wow” class to them, this way, the element will be invisible until you scroll to reveal the section.

<div class="wow">
    This is some content to be revealed
</div>

It’s that simple believe me!

Animate!

Decide which animation style you want to use and just animate right away! I’m gonna stick with rubberBand. So in order to apply that animation, all I need to write in my codes is:

<div class="wow rubberBand">
    The stuffs to animate goes here
</div>

And that is about it! Simple, right?

You can choose from the numerous animation styles available at Animate.css and you can check on the Wow.js documentation to know more about using Wow.js.

Go and make stunning animations, you have what it takes!!!