Tutorial for animated scroll loading effects with Animate.css and jQuery

You may have come across websites where when you scroll down, the page contents come into the viewport with some cool animation effects. I needed to use an effect like that for one of my project and I looked around to figure out how it is done. My Javascript knowledge is very limited , so the question of writing myself a custom script that can execute such animations was clearly out of the window. So I decided to take resort in some existing solutions and here I share with you how I did it. If you find it useful in your projects then I will be a happy man.

Scripts

The scroll load animation we are going to implement require 2 different scripts.

1. CSS Animate –  This is an amazing library of CSS animation effects. This gives us an easy way to implement css animations by assigning custom class names to elements.

2. jQuery Viewport Checker – A nifty little script that checks if an element is in the viewport and then adds a class to it.

Add the scripts to the document header.

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="viewportchecker.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- We also need jQuery -->

HTML

Lets dive into the details. Our demo emulates sort of a blog setup. The basic HTML structure is as follows

<div class="container">
	<div class="post"> <!-- Post content goes here --> </div>
	<div class="post"> <!-- Post content goes here --> </div>
	<div class="post"> <!-- Post content goes here --> </div>
	<div class="post"> <!-- Post content goes here --> </div>
	<div class="post"> <!-- Post content goes here --> </div>
	<div class="post"> <!-- Post content goes here --> </div>
</div>

CSS

Now we have a page with few post items listed on it. Next we see how to hide the post items that are out of the viewport and show the post items that enters the viewport. For that we use 2 simple class names with styles as follows.

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

With this we hide any post with the class name hidden and show any post with class name visible.

Javascript

Now we add the jQuery magic that creates the scroll loading effects. As we saw already the Animate.css lets us use a custom class name to add a css animation effect. The library has many animation effects, but we use only entrance type animation names. For example we are going to apply the fadeIn effect.

So the code will be

jQuery(document).ready(function() {
	jQuery('.post').addClass("hidden").viewportChecker({
	    classToAdd: 'visible animated fadeIn',
	    offset: 100
	   });
});

What does it do? It finds the “post” elements and adds the “hidden” class to them. Then as the post elements come into the viewport it adds the “visible” class along with our custom animation class names. This results in a nice little animated content loading. You can change the fadeIn class name to any other entrance animation effect name available in animate.css.

 

Thanks to the developers  at Webucator.com , who made a video based on this tutorial as a part of the jQuery  training lessons.

Demo

Download

 

Find an update here, that demonstrate the tutorial usage in a Bootstrap WordPress theme

 

  • Amit Saxena

    With Bootstrap, use .hide_me instead of .hidden
    Just do not use .hidden

    • Ali

      pls help i changed but not work yet

      • Amit Saxena

        There is not other catch. I hope you have resolved it by now?

        • Mie Louise Panvig

          Im having the same issue, i have changed the hidden og visble

    • Emma

      I had the same problem but after changing hidden to .hide_me it worked perfectly. Thanks

      • Amit Saxena

        Glad to help 🙂

    • Cod3rror

      Thank you very much! Worked perfectly. For those wondering, you have to change .hidden to .hide_me, in the JQuery part.

      • Amit Saxena

        You are welcome 🙂

    • Ibrahim Samad

      Yh..Thanks that also saved me.

    • tyrone

      thhaaaannnksss

      • Amit Saxena

        You are welcome 🙂

    • Namrata Naik

      Thanksss a lot…. you saved me….!!!!

      • Amit Saxena

        You’re welcome! 🙂

    • Gianluca Elia

      Awesome!! Thanks!

      • Amit Saxena

        Welcome!

  • Ali

    its not work with bootstrap 🙁
    i changed hidden and visible but not work 🙁

    • tyrone

      Please did you find a fix for this? I’m having the same problem

  • binayak mahapatra

    It’s cool, and works good….thanks for this.

  • John Trinh

    Hello everyone, I used viewportcheck for a iframe. But I have a problem. if my iframe same height with innerHtml (iframe no scroll) that don’t check viewport.

  • Krishna Madhav

    hi

    i really like the scroll animation. But just i want to top to down effect only … is this if i refreshed in down the scroll effect should work start down to top. please find the issue. i know thats not issue but i dont’t want that…..

  • Tanja

    I’ve tested the demo site in ie edge > emulation console > ie 11 agent and it doesn’t work. ViewportChecker’s callbackfunction does not execute and the div elements with the class ‘post’ remain hidden. 🙁
    Please help!

    • Tanja

      I’ve tested the demo page in actual ie11 now and it worked just fine. My fault!

  • That’s great. I’m using it on my website. thanks

  • Didier Vanassche

    I have 2 questions
    1. How can I create a delay of a few seconds? I have a text bounceInLeft and a text bounceInRight.
    I want the bounceInRight to come in few seconds later.

    2. How can I adjust the ‘bounceIn’ that it doesn’t have a ‘bounce’ effect on the end?

    • T. Cook

      You can do it easily using css3 animation-delay property like this :

      .first{

      animation-delay:0.3s;

      }
      .second{

      animation-delay:0.6s;

      }

  • ZigMusic Ir

    Animate does not work on my website 🙁 ! سئو

  • Hendri Hendri

    Is it also working for google bogger (blogspot) and how to apply it to blogspot?

  • Bizzaro Galore

    Is it possible to make this work inside of a scrollable div on a page? Everything else I find the whole page has to scroll.

  • Steven Sayers

    Thanks alot for this, such a simple tutorial to follow and it has enhanced my website beautifully. legend

  • Tommy Acierno

    Thanks for this great tutorial. I’m having a bit of an issue applying this to a squarespace page. I added the hidden class to a block by appending it to the existing class list:

    var d = document.getElementById(“uniqueSquarespaceBlockID”);
    d.className += ” hidden”;

    When I load the page, the block is hidden and stays hidden. I’m curious if there are any additional special considerations that I may need to address? Thanks!

    • jinsona

      Adding the hidden class is only half of the job. Then we need to remove this hidden class and append special animation class when the element gets in the viewport.

  • Camilo

    Muchas Gracias!!!!

  • Harry

    i am starting to question my sanity, i’ve tried just about every tutorial now, but the elements keep loading all at once…scrolling down, all the elements are already there. i’ve done everything as described above, even changed the hidden class, because i’m working with bootstrap, but somehow every tutorial seems to fail.

    • jinsona

      Plz show your code. I will check it.

      • Harry

        hey, thanks for your reply!

        my files are at github /magnetarsaurus/fermy2

        it’s just concerns ‘About’ and ‘StyleAbout’ right now

        hope you can find what i’m doing wrong!

        • jinsona

          Just add html doctype declaration at the top of your html file.

        • Harry

          omg…that did it…you are my hero! thank you so much! 🙂

  • uturn4

    Hi, animation gone after scroll down. Need effect also when scroll up and down. Any solutions?