Here is the first part of my next series of tutorials dedicated to animate.css. With this series you will learn step by step how to create design animations, simply with a few lines of Javascript code.

In this first part I will show you how to install animate.css and I will also show you how to configure the basic animations to get started. The further we go in the tutorials, the more complex and fun the animations will be. So hang on and let's start right now!

To start, you have the choice to download the animate.css or use the CDN which will save you from having to add a large file to your website.

I have created a Github repository, to allow you to visualize the implementation simply. You can consult it at this address --> https://github.com/Utopian-Nicky/Animation-JS-Tutorial

1) Preparation

You can create your animations using pure JavaScript, but here I prefer to use jQuery, to have a more pleasant code to read and easier to understand.

For jQuery to work you always have the choice between : download the jQuery file, or implement the CDN in your code. As you can see in my repository, I preferred to use the CDN but once again you have the choice on how to implement it.

For a complete overview of the HTML code of this tutorial go here -->https://github.com/Utopian-Nicky/Animation-JS-Tutorial/blob/master/index.html

Here is the list of CDNs I used for this tutorial

• Bootstrap.min.css : Not obligatory but just to have a more pleasant layout.
• Animate.css : Mandatory because without it nothing will work
• jQuery-3.2.1.slim.min.js : Mandatory for the smooth running of this tutorial
• Bootstrap.min.js : Not obligatory but it will be useful for the rest of the tutorials

And here is the list of css and js files in the tutorial

• Style.css : Not required, just for page layout
• Index.js : Will contain our JS function
• Animation-web.js : We will put here our code to run our animations.

2) Use without JavaScript

It is quite possible to add animation without JavaScript. But these animations will only start when the page is loaded.

To do this you just have to change the class of the element you want and when loading the page the animations will start and stop.

Here is an example :

As you can see in my repository I have created three buttons that only animate when the page is loaded and three other buttons that animate when hovering over them with the mouse.

For animations without JavaScript, we are obliged to add the class that will animate the button ourselves in the HTML code. For the other buttons we will see below how to animate them in JavaScript.

    |button id="btn-1" type="button" class="btn btn-primary animated shake"|

Above you have the first btn tag, which is animated with the class |animated shake|. You can find a list of all the animations available on the website dedicated to this CSS file. --> https://daneden.github.io/animate.css/

You have a wide choice of animation, but beware, they are not all made to be used in a static way. Some necessarily require the use of JavaScript for them to work properly.

I let you have fun testing the different classes available. You will see you can already animate your website while we haven't even really started this tutorial yet.

Now that you have understood the principle of animation by simply using the classes in your HTML file, let's now see how to make your site a little more dynamic by making the buttons react to the hover.

3) Use with JavaScript

Now it's getting interesting. We will animate the last three buttons using JavaScript. The buttons will activate animation classes only when we fly over the button we want to animate.

To do this, we need to create a animationHover function You can find it here -->> https://github.com/Utopian-Nicky/Animation-JS-Tutorial/blob/master/index.js

function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.addClass('animated ' + animation);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
        });
}

This function is very simple but it is essential for the proper functioning of our last three buttons.

the first parameter will be used to assign the class to the element of our choice, the second parameter will allow us to assign the animation of our choice to the element we have chosen.

This function will do all the work for us. So you might as well write it down once and for all and reuse it as I'll show you.

e.g :

• element.addClass('animated ' + animation);
• element.removeClass('animated ' + animation);

Conclusion

Now that our function is ready let's see how to use it. To start you must choose the element you want to animate. Retrieve either your ID or class.

When done, look at the code on this page and do the same. -->> https://github.com/Utopian-Nicky/Animation-JS-Tutorial/blob/master/animation-web.js <<--

This file contains this code

btn4 = $('#btn-4');
animationHover(btn4,'tada');
btn5 = $('#btn-5');
animationHover(btn5,'bounce');
btn6 = $('#btn-6');
animationHover(btn6,'flash');

As you can see, I've easily retrieved the IDs of my tags using a bit of jQuery, and I used the function we created in the previous step.

And now here are our last three buttons that come to life as we hover over the mouse. You managed to bring your website to life and you saw it was really not complicated.

I hope you find this tutorial useful. And don't hesitate to ask me your questions in commentary or via the Utopian Discord if you have any concerns for the implementation of this tutorial.

Link

• https://daneden.github.io/animate.css/
• https://github.com/Utopian-Nicky/Animation-JS-Tutorial
• https://discord.gg/PWRVN2U

Nicky Larson !