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

 

  • Thank you, it seems to be becoming a little bit of a trend now, going to experiment it on one of my pages. Great tutorial.

  • enekobarrero

    Great! But… Can I use viewportchecker for adding class to fixed element when a relative comes to viewport?

    • jinsona

      I am not sure. Probably not, if the fixed element is in the viewport to begin with. But it is best to test the scenario out to be sure.

  • Sam

    so i get a console error saying .viewportChecker in not a function?

    • jinsona

      Where do you see the error? on the demo?

    • Rahul

      Make sure you have included the Javascript file.

  • I wish you could have a tutorial with waypoints.

  • sushil

    it’s not working properly in the code

  • Norman Aráuz
  • Check out WOW.js, which does basicaly the same thing (and more). Its only dependency is Animate.css (no jQuery). http://mynameismatthieu.com/WOW/

  • Uğur Öztekin

    Perfect, Perfect, Perfect!!!!! I FOUND THIS!!! I’M SO HAPPY!!! THANKSSSSS…..

  • Kriegar

    I just use CSS3 Animate It http://css3-animate-it.jackonthe.net/, it’s a lightweight plugin that has loads of features.

  • alex

    Hi, does someone know how to use this with bootstrap 3.2? cant make it work with it

    • Rahul

      Did you try to change the class name in the javascript(post) to the one you have in the page that you have created using bootstrap? I guess that might work…

    • Mark

      Seems that bootstrap has a clash with the .hidden / .visable classes

  • Ana Beatriz Dominguez Organero

    thanks for this tutorial. I try to work this on joomla 3 and the class visible is added but the page is empty.
    Can you help me, please? Thanks

  • shannon

    thanks for the nice article. It’s really helpful on my project.

  • Antonio T Jennings

    Downloaded the files. am I missing something because its not working for me.

  • Abdessamad Amzerin

    first add the hidden class to the divs:

    then replace this script:

    jQuery(document).ready(function() {

    jQuery(‘.post’).addClass(“hidden”).viewportChecker({

    classToAdd: ‘visible animated fadeIn’,

    offset: 100

    });

    });

    with this one

    jQuery(document).ready(function() {

    jQuery(‘.post’).removeClass(“hidden”).viewportChecker({

    classToAdd: ‘visible animated fadeIn’,

    offset: 100

    });

    });

    and then run the page on a webserver (like xampp for example)

    • jinsona

      Yes that is one way to do it. But I wanted to make sure the posts behave normal in a noscript scenario. When we code the hidden class to HTML,the elements will stay hidden when js is not available.

      • nemosucker

        Yes you are right on this one “noscript”.

  • Kamel38

    What if we want to add different animations to different classes ? We have to report many time
    “jQuery(‘.post’).addClass(“hidden”).viewportChecker({
    classToAdd: ‘visible animated fadeIn’,
    offset: 100
    });”
    ?

    • Manik

      Just change class name,
      Ex: classToAdd: ‘visible animated fadeIn’,
      to : classToAdd: ‘visible animated bounceIn’, /*Just change last word*/

  • Dirk

    Maybe worth mentioning: add the animation type (.fadeIn for example) to the element itself and let the viewport checker only add the .animated class to use multiple animations.

  • Irena

    Cool! thanks for sharing

  • Jason Huisman

    This is great and works perfectly!!, was just wondering though if I want wanted to run it in reverse how would i go about it, i.e. I have scrolled down the animations loaded, but when I scroll up I would like the animations to move out in reverse.

    • Claudiu

      Open viewportchecker.js and change the line to repeat: true,

      • shivi

        but still its not working

        • shivi

          These are not working in reverse mode

        • shivi

          Please reply soon

        • shivi

          and there is no line like repeat

  • Abhishek Sachan

    Do I need to give hidden class to the element I want to animate?

    • jack

      TRY THIS ==========================================//

      $(document).ready(function () {

      $(‘.visible’).animate({height:”500px”});

      $(‘.demo’).viewportChecker({

      classToAdd: ‘visible’, // Class to add to the elements when they are visible

      offset: 100, // The offset of the elements (let them appear earlier or later)

      callbackFunction: function (elem) { } // Callback to do after a class was added to an element

      });

      });

      .testing {

      background-color: #eee;

      width: 100%;

      height: 800px;

      }

      .demo {

      opacity: 0;

      -moz-opacity: 0;

      -webkit-opacity: 0;

      background-color: #00eedd;

      height: 200px;

      width: 200px;

      }

      .visible {

      opacity: 1;

      -moz-opacity: 1;

      -webkit-opacity: 1;

      position: relative;

      -webkit-animation: myfirst 0.8s; /* Chrome, Safari, Opera */

      -moz-animation: myfirst 0.8s; /* Mozilla */

      animation: myfirst 0.8s;

      }

      /* Mozilla */

      @-moz-keyframes myfirst {

      from {

      opacity: 0;

      -moz-opacity: 0;

      z-index: 2;

      top: -30px;

      }

      to {

      opacity: 1;

      -moz-opacity: 1;

      z-index: 0;

      top: 0;

      }

      }

      /* Chrome, Safari, Opera */

      @-webkit-keyframes myfirst {

      from {

      -webkit-opacity: 0;

      z-index: 2;

      top: -30px;

      }

      to {

      -webkit-opacity: 1;

      z-index: 0;

      top: 0;

      }

      }

      /* Standard syntax */

      @keyframes myfirst {

      from {

      opacity: 0;

      z-index: 2;

      top: -30px;

      }

      to {

      opacity: 1;

      z-index: 0;

      top: 0;

      }

      }

      abcd

      lorem ipsum

      • Abhishek Sachan

        Thanks Jack. It worked. Can’t tell the amount of excitement I’ve got.

  • jack

    pretty good plugin

  • Jatinder

    hi, i used this plugin , but the animation is working only one time in the mozilla firefox, second time there is no animation..

  • Shûññö Vûböñ

    Thanks I got it . I wasted my many time for it. thanks a lot 🙂

  • jinsona

    Please remember to use some different class names to set the opacity parameters when you use this solution in a Bootstrap framework. It is because Bootstrap already comes with a ‘visible’ and ‘hidden’ class names with it that manages display properties. When I made this tutorial I did not consider the Bootstrap environment, so I just used the most obvious class names to set opacity parameters.

  • hutruk

    Great Tutorial, thanks!
    Would it be possible to modify the scripts in such a way that each div would jump to the top of the viewport (thus scrolling the page) after being detected by the viewport checker and also retaining the animation type?
    Thanks!

  • Krunal

    Its not working..
    When I “Visible” class as a parameter to the viewport function, it works

    • Jenny simth

      you right. This is not working. I download it perfectly. What should I add to change this. Thanks.

      • It is working fine Jenny. Tell me what issue you’re facing?

  • Lisa

    Not working 🙁
    I’ve changed the class names since I’ve also used Bootstrap,it still isn’t coming!

    • alexei

      change “hidden” class on jquery for one of your own like “hidden2”. should work

  • Martin

    Hi. This looks great however I’m seeing the animation of each div all happen at the same time (I can only see it happen when refreshing the page). Rather than gradually as I scroll down the page.

  • Tung Tran

    Love it.

  • I love it, however the effect is not working for me….I am using this on my wordpress page. I switched the hidden and visible name classes but it’s still not working…any advice?

  • shoroar

    this is not working any div which contain pull-left or pull-right class in bootstrap and is there any way when i scroll up again the animation is showing

  • aboasy

    how to repeat the same effect while scrolling up?

  • Bram

    So, i used the code(i’m also working with bootstrap but i fixed the classes) and got it to work. But the animation works only once. If i refresh the page the animation won’t happon again. And the area where my div would be remains empty. Does someone know why?

    It doesn’t seem to work on firefox & IE, on firefox nothing happons and the area remains empty and on IE the area is filled with the div, but there is no animation.

  • Shouldn’t you call the jQuery library before you call the viewportchecker.js? I assume the latter has a dependency on the former. That may be why it doesn’t work for some people here.

  • alexei

    the files are working on local but when i upload it to the server the effects wont work, The info is there like there is no effect added. weird.

  • Thanh Long Trần

    Good

  • cici

    it’s working perfect but somehting make the width of the body *2

  • Kristen

    I have entered in the code and loaded files but the problem I am running into is that it doesn’t animate when I scroll down the page but rather animates as soon as the page is loaded. Does it think the entire page is in the viewport?

    • Danny Tomalin

      I am having the same issue did you manage to fix it?

  • Jatin Soni

    This is really easy to use tutorial. Thanks a lot. Just wonder of one thing, If I want to print the page, than it gives blank area for the animated elements.

    I have tried by overriding rule for print media as below

    @media print{
    post{
    opacity: 1 !important;
    }
    }

    However, this doesn’t work with Chrome but only firefox. I didn’t checked for IE and Safari yet.

  • Elancore

    This is not working on my Android!!

  • Do the following things if your script is not working.

    1: First I’ve rename the classes name, (.hidden .visible) into (.hideit .visibleit)
    2: Call the jQuery library before you call the viewportchecker.js like so:

    Thanks

    • I had a some problem in Bootstrap, I added my main.css, .hiddenit, .visibleit class and change to before write jquery class. It’s work ! Thank you for share information.

      • I am glad It’s work for you. You’re welcome.

  • Stefan Maksimovic

    Can someone help me to incorporate my code for skill progress bars into this code?

    jQuery(‘.skillbar’).each(function(){

    jQuery(this).find(‘.skillbar-bar’).animate({

    width:jQuery(this).attr(‘data-percent’)

    },2000);

    });

  • Stefan Maksimovic

    Ou, this is great…Can someone just help me to incorporate my skill bar code into this so that both working together?

    jQuery(‘.skillbar’).each(function(){

    jQuery(this).find(‘.skillbar-bar’).animate({

    width:jQuery(this).attr(‘data-percent’)

    },2000);

    });

  • nice collection sir !

    i want to knows about this !

    some of my css3 experiments

    http://www.w3course.com/experiments/our-solar-system-experiment-in-css3-animations.html

  • Nitish Dolakasharia

    Thanks a lot for sharing !

  • Most useful tut I have found this year, so easy to drop into an existing site to add that extra sparkle.

  • Bryan

    I was wondering if there’s a way to fade out as you’re scrolling away from the element. It works wonderfully when scrolling to display it, but suddenly vanishes (kind of clunky) as you continue scrolling down. I was hoping there’s a way to make this look a little smoother…

  • Ali

    Only three words to comment. Amazing Amazing And Amazing!

  • Nice thanks for sharing !

  • MPx

    Hello, I made this.. well, made. XD
    http://unbreakable-ac.cf/tournament.html
    I’m a newbie, I just started 2 weeks ago and I like this.
    Sorry if you guys consider it as spam. it’s not what i want to do here. no.

    • jinsona

      Nice work.