waypointとanimate.cssを利用しスクロールに合わせてHTML要素が下からフェードインしてくるエフェクトについて

Question

初めまして、jquery勉強中のものです。何卒よろしくお願いいたします！

タイトルについてwaypointとanimat.cssを組み合わせて表現するエフェクトについてなんですが、
下記で記載したコードでは、一度下にスクロールした後に再度上にスクロールするまではfadeInUp,fadeOutUpで表示されたり消えたりするのですが、そこからなんども表示非表示を繰り返し記載する方法がわかりません。

ご教授してくださると幸いです！

main.js

$(document).ready(function() {

// animatedクラスの付いた要素にwaypointを登録
$(".animated").waypoint({
handler: function(direction) {

  if (direction === "down") { // 下方向のスクロール
   
    $(this.element).addClass("fadeInUp");
   
  }else if(direction === "up"){
          $(this.element).addClass("fadeOutUp");
  }
},

// 要素が画面中央に来たらhandlerを実行
offset: "50%"

});
});

無知で申し訳ありません