JQuery/CSS animate transitions slowing page

Question

I have a page where a user scrolls and animations are displayed when they are visible on the page, and hide when they aren't. This happens whenever the page is scrolled, but it seems to be taking up too much processing power and the page scrolls rather staticly.

Here is the code I'm using:

$('body').scroll(function(){


        $('.anim').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $(this).removeClass("hidden");
            $(this).addClass("visible animated fadeIn");
          } else {
            // element has gone out of viewport
            $(this).removeClass("visible animated fadeIn");
            $(this).addClass("hidden");
          }
        });


        $('.anim_bounceIn').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $(this).removeClass("hidden");
            $(this).addClass("visible animated bounceIn");
          } else {
            // element has gone out of viewport
            $(this).removeClass("visible animated bounceIn");
            $(this).addClass("hidden");
          }
        });

        $('.anim_bounceInUp').on('inview', function (event, visible) {
          if (visible == true) { 
            // element is now visible in the viewport
            $("#"+$(this).attr("relID")).removeClass("hidden"); 
            $("#"+$(this).attr("relID")).addClass("visible animated bounceInUp");
          } else {
            // element has gone out of viewport
            $("#"+$(this).attr("relID")).removeClass("visible animated bounceInUp");
            $("#"+$(this).attr("relID")).addClass("hidden");
          }
        });

     }); 

By my knowledge, firing functions on scroll is not very efficient. Is there a better way for me to accomplish this?

Here is the page in question, its just a test area...

http://185.116.213.24/~demotester/brochure-test/

Answer 1

This readme says what you need to simply catch inview event withoyt any direct interactions with scroll event.

Also, anyway, if you need to catch scroll event by some reason, the handler must be as lightweight as it can. For example, you should cache all jQuery objects in global variables outside handler instead of calling constructor each time.