Animate on scroll - Best 5 CSS3+jQuery scroll libraries

Web design is no more limited to content and graphics. One can not deny the role of animations and effects on the websites. 

There are many animation libraries available but we are listing best 5 efficient and easy to implement CSS3+jQuery scroll animation libraries to save your time to find them.

A well-executed animation on the website can increase the user experience for visitors.

Let's explore the best 5 CSS3+jQuery scroll animation libraries and animate your page on the scroll in no time.

AOS - Animation on scroll

AOS is a very simple and easy to use animation library. AOS uses CSS3 animation with the combination of jquery to animate the content on the website. 

To use animation on scroll plugin, we need to install only two files aos.css and aos.js

You can also install this using bower or npm. There is also CDN option on the official website to make it even more easy to use.

Add the CSS in head and js before the closing body tag.

Once the two files have been installed we need to init it.

AOS.init();

That is all we need to do and we are ready to animate the elements on the site. Using data-aos attribute we can design all our elements very easily. 

Usage example - 

<div data-aos="fade-left"></div>

AOS provides various options to make the animation more controlled like offset, duration, timing function(easing), delay, and how many times the animation should take place etc.

We can also apply animations dynamically to the HTML elements - 

$('.btn').attr('data-aos','flip-up');
$('h1').attr('data-aos','fade-in');
AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-out-back',
    delay: 350,
    once: true,
    disable: 'mobile'
});

AOS also provides the option whether the animation should be disabled on mobiles.

AOS.init({
    disable: 'mobile' //disable the animation on mobile
});

The best part of the AOS is that we can animate elements while scrolling down and to up of the page as well. AOS is very easy to implement and can be customized as per the requirements.

Explore all the available animation and options on the official website - AOS - Animate On Scroll

WOW.js

WOW.js works with the animate.css library used for simple animation. We can use all the animations from the animate.css with WOW.js together.

We all are familiar with animate.css and how it works. If you are a beginner and no idea about the animate.css usage, here is how it works.

Add animate.css in head of the page

<link rel="stylesheet" href="css/animate.css">

<!-- or CDN -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" 
crossorigin="anonymous">

Now, all the animations are accessible on the webpage and elements are ready to be animated. Now we just need to add class animated and animation name we like to apply to the HTML element.

For example - 

<div class="animated zoomIn">Zoom In</div>

Each HTML element can be animated differently by applying different animation class names. 

We can also animate HTML element dynamically instead of adding classes to each element manually. 

Animate on click - 

$('button').click(function() {
    $('h1').addClass('animated zoomIn');
})

Very easy!

Now the WOW.js make it very easy to trigger these animations when the page is scrolled. Which means elements are animated only when they are in view.

WOW.js is easy to configure and make the animation up and running in no time. 

Let's see how to work with animate.css and wow.js library together with the basic options and usages - Add WOW.js before closing of body tag

<script src="stylesheet" href="js/wow.js"></script>

and, initialize wow.js 

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

Everything is done. Now we just need to add "wow" class to elements we want to animate on scroll down

<div class="animated zoomIn wow">Zoom In</div>

That is all. The div element will zoomIn when the element will be in view.

Advanced settings are also available like duration, delay, iteration etc. WOW.js also allows to customize the options as well. we can dynamically apply wow to all elements with a custom option like animation can be on or off in mobile etc. 

wow = new WOW(
    {
        boxClass:     'wow',      // default
        animateClass: 'animated', // default
        offset:       0,          // default
        mobile:       true,       // default
        live:         true        // default
    }
)
wow.init();

Learn more about effective use of WOW.js on official website

jQuery AniView

AniView is a lightweight jQuery plugin which uses aniamte.css to animate the elements. AniView is a right choice when you want the animation with real quick configurations.

Let's see how to get going with AniView.

Add animate.css in the head of the page.

Download and add AniView before closing the body tag. There is also CDN available at if you do not want to install locally.

<script src="https://unpkg.com/jquery-aniview@1.0.1/dist/jquery.aniview.js"
integrity="sha384-zDA6q/t525x7f6KD/OaOe24vCxSPU3eraILc2NU+ZA7ISsc3ExQbj8PB56FRMq6H"
crossorigin="anonymous"></script>

Now we are ready to animate HTML elements and we have access to all the animation of animate.css

Initiaize AniView - 

$('.aniview').AniView();

Adding animation to HTML elements -

To animate the element we add class anyview and animation name in data-av-animation attribute.

<div class="aniview" data-av-animation="fadeInUp">Hello Wordl!</div>

Very easy.

Head over to AnyView website to explore additional configurations.

Animateit

Animateit is also using CSS animation library with animateit library. It has its own css3 animation library which is used with animateit.

Unlike others libraries, animateit has a little different approach to execute the animate.

Let's see.

First of all, we need to include css3-animated.js at the end of your file and animations.css in the head.

<head>
.
.
  <link rel="stylesheet" href="animations.css">
.
.
</head>
<body>
.
.
.
<script type="text/javascript" src="/js/css3-animate-it.js"></script>
</body>

Now we just need to define animatedParent as the parent class which will trigger the child class "animated" to animate the HTML element with the defined animation class name.

For example -

<div class='animatedParent'>
    <h2 class='animated fadeInUpShort'>Hola!</h2>
</div>

We can customize the animation by using delay, iteration, speed and offset etc. 

<div class='animatedParent animateOnce'>
    <h2 class='animated fadeInUpShort slowest'>Hola!</h2>
</div>

The above example will animate the h2 element once and slowly. 

With animateit, we can also use the click event to animate the elements. For this, we will use data-target atribute.

Animation on click example - 

<div class='animatedParent animateOnce'>
    <button type='button' class='animatedClick' data-target='clickExample'></button>
    <h2 class='animated bounceInDown clickExample fadeOutDown'>Hola!</h2>
</div>

The best part of animateit is Sequencing because of its simple and easy implementation. 

Add data-sequence attribute in parent element and data-id attribute in child elements for the order sequence.

<div class='animatedParent animateOnce' data-sequence='300'>
    <h2 class='animated fadeInUpShort' data-id='1'>Hola!</h2>
    <p class='animated fadeInUpShort' data-id='2'>
       Nam ipsum wisi imperdiet
       parturient sit pede non mauris. 
       Proin lectus in. Ultricies vel per.
    </p>
    <button type='button' data-id='3'></button>
</div>

Neat!

Browse all available animations and more options on the official website.

animate-scroll

Animate-scroll gives more options to customize the animations on the scroll and allow to use custom animations as well. Being easy to set up and smooth on mobiles, it comes with in-built animations.

Animate-scroll requires jQuery and greenshok. 

Installation -

Download or clone the repo from GitHub. If you want to install it using bower 

bower i mpalpha/animate-scroll

Similar to other animation plugins, we need to add the animate-scroll before the body closing tag and initialize it.

<head>
.
</head>
<body>
.
.
<script type="text/javascript" src="/js/animate-scroll.js"></script>

<script>
    $(document).animateScroll();  
</script>
</body>

We are now ready to animate elements.

Here is the basic example -

<div data-animate-scroll='{ 
"x": "-10", "y": "-10", 
"alpha": "1",  
"scaleX": "1.5", "scaleY": "1.5", 
"easingType": "Cubic.easeIn", 
"duration": "1" }'>
    Hola!
</div>  

We can mix and match properties to make the animation attractive. Find more configuration options here

So, these are available quick to use jQuery+CSS3 based animation plugins. 

Leave a comment