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

 

  • this conflict with bootstrap. how can using it in bootstrap?

    • Hey Ahmad, I had this problem too, but after several hours of trial and error (I’m a noob at Bootstrap and coding) I finally solved it.

      Name the hidden and visible attributes to something else. I’ve simply named mine:

      jQuery(document).ready(function() {
      jQuery(‘.post2’).addClass(“hidden2”).viewportChecker({
      classToAdd: ‘visible2 animated bounceInUp’, // Class to add to the elements when they are visible
      offset: 100
      });
      });

      and in the CSS

      .hidden2{
      opacity: 0;
      }

      .visible2{
      opacity: 1;
      }

      And it finally worked for me! So relieved. Wish I knew what I was doing, lol. Good luck, hope it helps.

      Thanks for the tutorial by the way!!

  • Erika

    It stays hidden for me.

    • Erika

      Lol, jk I had a typo in my href 🙂

  • Octron

    Hello,
    is perfect .. but I have a question … if I wanted that when shake up the class added to disappear ? in this case appears or disappears when you shake . how can I do ?

  • Sugafree

    Hi,

    I cant get it working for some reason. I have been researching this for like 2 days now and still nothing. First I wanted to use it with bootstrap, then i changed hidden and visible class in css and also in custom.js file, still nothing. Tried many things, nothing. I thought i try a different approach and so i downloaded the zip file here, still nothing, again changed hidden and visible css and js refs still nothing! Whats going on?? Js is enabled, demo is working online but when I download it, it will show all posts without animation. error msg is jQuery is not defined pointing to –> jQuery(document).ready(function() {

    • jinsona

      If you are running the demo on desktop, without a localhost setup like wamp or xamp, make sure you add the http before the jquery reference. Please check the video in the article. It is demonstrated there.

  • Jmarck

    Anyone know how to reverse the effect when scrolling up? Please help ASAP… 🙁

  • Shubham Aggarwal

    how to remove the element with the opposite effect as the element move out of the viewport

  • this one is awesome

  • leoalv

    I can use this with nested classes?

    I have the following code:

    In the post class, style-1 I want to use fadeIn. and post class, style-2 I want to use bounceInUp.

    Because if I use jQuery(‘. post’) assigned me the same on both.

    Thank You

    • jinsona

      This tut is almost an year old, and the viewportchecker script has developed a lot since then. Please check the latest version of the script, it now comes with the option to add animation class at the HTML element level using data attributes.

  • Ashraf

    how i control the speed of eefect

  • I’ve used it with a Joomla template.
    The best way to have a cheap website looking cool.

    Thanks for sharing.

  • Nebojsa

    Can I do this on scrolle left-right?

  • sheo

    it not work with bootstrap why ?

    • DrStein

      You should change hidden class to myHidden or what ever you want. Since hidden class is also used in bootstrap which in that it makes display none.

      • RamziRambles♫

        Tried this.. Still didnt work

      • Mollvi Aufar Mudzakir

        it works for me so far. i changed hidden class name.

  • jonathan_adcox

    One Word… “WOW”!!! this is so cool. I am going to dissect this immediately and see how it is done. I love this.

  • nadeem

    hi all !!…this thing doesnt work on my website..its a hand coded html website…. i have tried everything from changing the class hidden to hideit and hidden2 and all… i am kinda new to this ….i am using a local server. I have a script for dropdown menu on the index file in the header…could that be the reason why its not working….? please help !!!

    • Anurag Nigam

      Hi Nadeem, it is working in all the dekstop and ios devices.
      You should check the things one by one.
      1. Check that your jquery library must have http:// added if you are working on local
      2. Next try to match the classes in your document ready function, your css and your Javascript
      3. Try to add the viewport checker script and document ready function together at the bottom of the page.

  • Anurag

    Hi, Thanks for sharing this but this is not working in Android, Nokia and other phone and tablet devices. It is working on ios for all devices.
    Please help me with that. Thanks

  • Laura

    Me too need that functions on mobile devices. How can you solve?
    Thanks!

    • Dirk

      The jQuery has been tested on a Galaxy S5, Lumia 930, Nexus 5, iPhone 4, iPhone 5 and iPhone 6. If you’re experiencing problems you should check your developer console for errors, since it probably is caused by your (other) code.

  • Daniel Spendiff

    On IPad and IPhone the text is showing and then the effect happens, it does not happen on scroll, its fine on desktop

  • Josiah Schaefer

    This was so helpful! Thank you!

  • rm1902

    Hi, is there an option to remove class with this plugin when the element isn’t in the viewport?

  • dsilvadesign

    Hello!
    This source for effects is really awesome, however, I haven’t found a way to make it work with my Jimdo website. I honestly tried everything (in my knowledge) and it still doesn’t work. Do you guys have any suggestions? Maybe is not working because of the Jimdo platform or something? Thaanks!

  • Nice, thanks for tutorial, get it 😀

  • Scroller

    Really nice! Is there a fallback in case JS is disabled? Does anybody know, how Google deals with content that is set to opacity:0 (hidden) initially?

  • nitin prajapati

    I m intigrated your demo file but it’s not working

  • Collins geek

    Great tutorial! But It has a little problem, the animation only occurs when you scroll down the first time! when you try scrolling down again the animation doesn’t take effect, it’s great any way 🙂

    • That is not a problem, that is the intention. Once it loads the content shouldn’t load again unless the user wants to refresh. You can however use the viewport checker in reverse if you want to remove to content when they scroll away from it but I would highly advise against that.

  • Collins geek

    I suggest you use CSS3 and jQuery for the animation! something like this::

    // CSS
    @keyframes animObject{ //you can give ‘animObject’ your own name
    from{ opacity: 0;}
    to{opacity: 1;}
    }

    #animate{
    animation-name: animObject;
    animation-duration: 1.5s; //sets the time of animation
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-play-state: normal;
    animation-direction: normal;
    animation-fill-state: forwards;
    } //that’s it for CSS

    //jQuery
    $(document).ready(function(){
    $(function(){
    var scroll=getCurrentScroll();
    if(scroll >= 20){
    document.getElementById(“animate”);
    }
    }
    And that’s how it is done

    • RamziRambles♫

      I tried this.. Doesnt work.. I just copy pasted the CSS in the CSS file and the jQuery part below my scripts in the HTML.. Is that right?

      • this method is not something I would recommend. If you don’t know how to code then you should use the original method in this tutorial. If you are wanting to learn code then no just pasting it in will not work. The code posted by @collinsGrimm:disqus is requiring elementIds so you would need to make an element with id=”animate” before his would work. The reason I would not suggest it is because it requires excessive code for every element you want to do it on.

        If you still want to do it with the amount of scroll method then I would suggest using my code that I provided which doesn’t depend on jQuery to function. This will save a lot of bloat but overall it will still be excessive to do it via IDs.

        http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/#comment-2283073064

    • Why would you load jQuery to do something built into Javascript? The jQuery usage in the tutorial is because of the viewport checker does the checking for you but if you are going to force it to be done view the amount of scroll you would have to do it for every element and every page. That is excessive.

      Also don’t use jQuery for stuff that vanilla javascript can do, that is just needless bloat.

      var pagetop, menu, yPos;
      function yScroll(){
      yPos = window.pageYOffset;
      if(yPos >= 20){
      elementID.style.property = “value”;
      } else {
      elementID.style.property = “value_return”;
      }
      }
      window.addEventListener(“scroll”, yScroll);

  • Elias Paiva

    i downloaded the file and the demo doesn’t work on my computer or any browser, i have change nothing in the file.

    But if i open the online demo it works! with the same code! please help me to fix this!

    • profi248

      Your browser won’t load external resources if you open local file.
      Solution 1: Download resources and link to them
      Solution 2: Upload it somewhere
      Solution 3: Use different browser/Change settings

    • Try to use a server. You can use gulp or grunt to have a server running. Since you’re a Windows user you can also easily set up Wamp/Xampp

    • Bilal Köşker

      use;

      or another cdnjs link for fontawesome and jquery libraries

  • ECarrera

    Thank you! 🙂

  • ababil

    Nice. I have tested. Simply superb.

  • cmdp

    This is cool and really easy to use! And I don’t even know how to code! Thanks.

  • Nassim

    Hi thanks for the code. I want to use it in sharepoint 2010 and it doesn’t work properly. it works only for first row of divs.
    Also it does not work in IE11 at all.
    Please help.

    • Sharepoint, there’s your problem.

      As for the IE11, it loads fine for me.

  • Lucas Marques

    Hi, thanks for the code, but… the demo is’t even working, neither the tutorial.

    • demo works for me in both Firefox and Chrome.

    • Patrick

      You are right. There are two references that miss “http:”.

      Corrections:

  • Hi, thanks for the code…

  • amazing very helpful!

  • Dario De Caneva

    Hi is it possible to add the class only scrolling down?
    I’m using slideInUp animation and I would like to trigger the animation only scrolling down.

  • Rauf

    Hi, Its nice to find this script however I am not able to to run that on my files even demo is working on my machine and I checked every link but could not figure where the problem is?

    • Haha

      i think you should add “http://” to here.

  • Leila

    hi what is the name of file of jQuery Viewport Checker because i don’t find it in gtihub can u help me please?may be it’s changed no?

  • GabriiEl SmiiTh

    hi it’s working for me but not when i scroll down it show directly when i refresh the page can you help plz

    • Nathanael Warren

      I have the same problem 😛 did you ever figure it out?

  • Kurt Kokoruz

    Has anyone solved the issue that none of these pages will print the content unless the user has scrolled to the bottom? That is the biggest issue I have with this plugin. If I load the page and try to print nothing below the fold prints because it’s visibility is none.

    • Sebastian Schimpf

      you could apply an extra stylesheet for print and overwrite the rules – easiest by using !important 🙂

  • Srivin Prabhash

    It’s not working with bootstrap 3 🙁

    • Srivin Prabhash

      Ah got it .. 😀 Changed the Visible and display class name and it’s working now .. 😀 Thank you very much for the post .. (Y)

    • Ali

      pls help i changed but not work yet 🙁

  • nfgnb

    Nice…

  • Santosh Bohara

    Great !

  • dorisweldonkaz

    This is great! Any tips for making the animation occur when I click to open a website’s menu (so that the animation is actually in the menu)?

  • Sebastian Schimpf

    I am kinda concerned about adding invisible elements to a page (that has significant importance) and rely entirely on JavaScript to make them visible! Wouldn’t it be better and safer to make those elements invisible by dynamically adding a CSS class and removing it again right before adding the class for the animation? Or may that result in page flickering because the elements get loaded first and the class added after page loading?
    I am trying to find a safer way!

    • Sebastian Schimpf

      I found modernizer.js and at least I can test if Javascript is activated and make those elements only invisible via CSS when js is for sure available.
      Example:
      .js .is-hidden {opacity: 0}

      The class js is placed in the html tag by modernizer if javascript is available in the browser. This is more safe because no element will be hidden if JS is not activated. I went even further and only play with these things if CSS Transitions are supported. Modernizer helps to check the availability ofthese browser features!

    • jinsona

      In the code you can see that the invisible class is added only via javascript. So in a no js environment the elements will not have the invisible class added to them and wont go invisible.

      • Sebastian Schimpf

        How could I miss that 😀 ??? lol

        Thanks for pointing it out!

  • Vivek B

    How to set animation duration ?

    • chrstndtz

      take a look in your animation.css file. you’ll find the class .animated coming with the animation-duration. make sure to change all four positions for browser support.

  • chrstndtz

    works perfect. huge thanks for article and video!

  • sleepydad

    Exactly what I need for my page, but it seems to be conflicting with my other jQuery

    • sleepydad

      Sorry, hit enter before I finished …

      I initiate my jQuery with $(function(){ }). I tried putting your script in there (minus the jQuery(document) and it doesn’t work. I tried putting it on its own as jQuery(document), still not working. I’m also calling in

      for other jQuery used on the page. I’ve tried placing

      before and after my calls, and still nothing. The only thing that happens, best case scenario, is that it hides the targeted divs, but the rest of my jQuery freezes.

      Suggestions?

      Thanks very much!

      • Sebastian Schimpf

        As a short tip, I would suggest that you use the console for javascript to see if there are any errors in the code. Just Google for the developer tools of the browser you are using. It makes sense to get used to using these tools for debugging.

  • Petr

    How can i animate posts that are leaving the viewport? thanks

  • Andrea Epifani

    It works for me. Very nice. I have a question about SEO. Do you think that loading some text only after scrolling may have a negative impact on SEO? Using Fetch as Google, I noticed that, after this animation effects, the various elements are not recognized by Google bot. So, this may alter some keywords positioning, I think.

    • JB

      Has anyone found a solutions for this? I do notice the Fetch as Google – Googlebot doesn’t see the animated elements. Maybe because it doesn’t recognize the viewport checker?
      I guess you have to limit this to non-content/keyword elements.
      Kind of unfortunate how it is a constant battle between Visual Design and SEO.

  • Marin Leo

    When i scroll down all the elements are already animated and i can’t see the animation. I see animations only if I scrool from the bottom up or when i reload over the elements.
    Does anyone know how to fix this problem?
    I have tried chaiging offset but still it is not working propperly.

    • إيهاب المهر

      offset:1000
      and reload your page

      • aidanlyon

        can you explain why that should work? i’m having the same problem

        • إيهاب المهر

          noticed that offset depends page height(Direct proportion) so you should change offset value to see animations when scroll down

    • aidanlyon

      Having the same problem. Did you have any luck?

  • Pan Fanky

    Thanks.. I guess you should include jquery before including the viewport checker (switch the lines)