Disparar Animação CSS com Scroll

Bom dia galera,

Eu estou tentando colocar um efeito fade numa DIV com o plugin Animate.css (http://daneden.github.io/animate.css/). O que acontece é que eu quero que esse efeito seja ativado assim que o SCROLL atingir esta DIV, como acontece nesse template http://shapebootstrap.net/preview/?id=439 . Um exemplo de como estou fazendo:

A div em HTML:

<div class="div1">
 <p>Teste</p>
</div>

<div class="div2">
 <p>Teste</p>
</div>

E o arquivo javascript para disparar a animação:

$(document).ready(function(){
 $('.div1').addClass('animated fadeInUp');
 $('.div2').addClass('animated fadeInUp');
});

A animação está funcionando normalmente, só que todas elas são ativadas assim que a página é carregada. Eu gostaria que elas fossem ativadas assim que o scroll atingisse a DIV.

Alguém pode me ajudar?