Animation on scroll to bottom

问题:

Any ideas for java script trigger animation repeat only when scroll down ...How to disable animation when scrolling back to top in this code.

I want animation trigger only when user scroll to bottom.

Please help :)

(function($, win) {
    $.fn.inViewport = function(cb) {

      return this.each(function(i, el) {

        function visPx() {

          var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t = r.top,
            b = r.bottom;
          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll", visPx);
      });
    };
  }

  (jQuery, window));
$(".about-img").inViewport(function(px) {

  if (px) $(this).addClass("grow-opacity-left");

  else {
    $(this).removeClass("grow-opacity-left");
  }
});

.separator {
  width: 100%;
  height: 150px;
}

.container {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.row {
  display: inline-block;
  position: relative;
  width: 49.5%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.about-img {
  width: 100%;
  overflow: hidden;
  position: relative;
  left: -60px;
  opacity: 0;
}

.about-img img {
  width: 100%;
  height: auto;
  transition: all 2s;
}

@keyframes grow-opacity-left {
  0% {
    opacity: 0;
    left: -60px;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.grow-opacity-left {
  animation: grow-opacity-left 0.9s ease-out 0.1s forwards;
}

<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>

<section class="container">
  <div class="row">
    <div class="about-img"><img src="https://cdn.wallpaper.com/main/00-tommaso_sartori_wallpaper_january_2017_0_52143382_159824012.jpg" /></div>
  </div>

  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>
  <div class="separator"></div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

(function($, win) { $.fn.inViewport = function(cb) {

 return this.each(function(i,el){

   function visPx(){

     var H = $(this).height(),
         r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
     return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
   } visPx();
   $(win).on("resize scroll", visPx); });};}

(jQuery, window)); $(".about").inViewport(function(px){

if(px) $(this).addClass("grow-opacity-left");

else {$(this).removeClass("grow-opacity-left");} 
});