Animación en desplazamiento hacia abajo

Cualquier idea para la animación de activación del script java solo se repite cuando se desplaza hacia abajo … Cómo deshabilitar la animación al desplazarse hacia atrás en este código.

Quiero activar la animación solo cuando el usuario se desplaza hacia abajo.

Por favor ayuda 🙂

(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; } 
 

 (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? Ht : (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");} });