How can I make div's animate when in viewport?

Question

I know how to make divs animated buy they do the animation on pageload which works if the div is in view but if not there's no point having that animation since you cant see it. How can I make it so the animation happens when you scroll over the div?

I have tried this:

HTML:

<section id="icon-3">
   <div class="row layout">
      <div class="col s12 m4">
         <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
            <h5 class="center">Who are we?</h5>
            <p class="light">We are Network, a group of amateur developers, designers and general tech enthusiats wanting to have an impact on the world via technology. We have members worldwide 
               wanting to help with our idea.
            </p>
         </div>
      </div>
      <div class="col s12 m4">
         <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">card_giftcard</i></h2>
            <h5 class="center">What do we offer?</h5>
            <p class="light">Resources and tutorials are not the only things we offer here at Network. We also offer a place to chat with other 
               developers worldwide and also a place to grow your community via our blog & portfolio hosting service.
            </p>
         </div>
      </div>
      <div class="col s12 m4">
         <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">extension</i></h2>
            <h5 class="center">What's our goal?</h5>
            <p class="light">Our ultimate goal as a group is to teach the world how to code, so as a community we can create amazing things to help
               the world with day to day tasks.
            </p>
         </div>
      </div>
   </div>
   </div>
</section>

JavaScript:

$(document).scroll(function() {
    var y = $(this).scrollTop();
    var x = $("#icon-3").position();

    if (y > (x.top - 50)) { // -50 so things don't overlap
        $(".layout").addClass(
            "bounceInRight");
    } else {
        $(".layout").removeClass(
            "bounceInRight");
    }
});

I have Jquery installed too