javascript - make animation with scrollTop -

animate = animate; desanimate = undo animate; 

friends, created function element animate or 'desanimate' depending on scroll of body or div is, it's working ok, how works?

<li data-animation-time="[100, 800]" data-animation-position="right" class="list-item one"></li> 

the first value of data-animation-time array initial value, ie animator function should called when scrolltop pass value, second value end, 'desanimate' function should called when scrolltop pass value.

everything working can see here -> codepen: http://codepen.io/celicoo/pen/ogkgep (you need scroll see animation happens).

now want determine way animation happen , way should end, changed attr:

data-animation-position="right-to-left" instead of right or left, , add ifs statements animation , 'desanimation' function:

animate:

var animate = function(target, position) {     target.css('display', 'inline-block');      if (position === 'right-to-right') {         target.animate({             opacity: 1,             right: '0px'         }, 500);     }     else if (position === 'right-to-left') {         target.animate({             opacity: 1,             right: '0px'         }, 500);     }     else if (position === 'left-to-left') {         target.animate({             opacity: 1,             left: '0px'         }, 500);     }     else if (position === 'left-to-right') {         target.animate({             opacity: 1,             left: '0px'         }, 500);     } }; 

'desanimate':

var desanimate = function(target, position) {      if (position === 'right-to-right') {         target.animate({             opacity: 0,             right: '245px'         }, 500);     }     else if (position === 'right-to-left') {         target.animate({             opacity: 0,             left: '245px'         }, 500);     }     else if (position === 'left-to-left') {         target.animate({             opacity: 0,             left: '245px'         }, 500);     }     else if (position === 'left-to-right') {         target.animate({             opacity: 0,             right: '245px'         }, 500);     } }; 

and not working in 'desanimate' way, not working good, , cant see is.

could give me hand here? doing 'desanimate' not work when inverted step values?

example:

left-to-right right-to-left 

codepen old code working 1 side (ex: left or right);

code pen new code not working 100% multiple sides (ex: left left, left right, right right or right left);

updated codepen link . have , let me know whether matches requirement.

    + function($) {          var animate = function(target, position) {             target.css('display', 'inline-block');              if (position === 'right-to-left' || position === 'right-to-right'  ) {       target.css('right', '500px');        target.css('left','' );                 target.animate({                     opacity: 1,                     right: '0px'                 }, 500);             }             else if (position === 'left-to-right' || position=="left-to-left") {        target.css('left', '500px');        target.css('right', '');                 target.animate({                     opacity: 1,                     left: '0px'                 }, 500);             }         };          var disanimate = function(target, position) {              if (position === 'right-to-left' || position ==="left-to-left") {       target.css('left','' );                 target.animate({                     opacity: 0,                     right: '245px'                 }, 500);             }             else if (position === 'left-to-right' || position === "right-to-right") {                 target.css('left','' );       target.animate({                     opacity: 0,                     left: '245px'                 }, 500);             }         };          $(window).on('load', function() {              var target = $('[data-animation-time]');             var animationinitial = target.data('animation-time')[0];             var animationfinal = target.data('animation-time')[1];           var position = target.data('animation-position');             var shown = false;                            $('.container').scroll(function() {                 var scroll = $(this).scrolltop();                  if (!shown && (animationinitial < scroll && animationfinal > scroll)) {       console.log("animate")                     animate(target, position);                     shown = true;                 }                 else if (shown && (animationfinal < scroll || animationinitial > scroll)) {          console.log("disanimate")                     disanimate(target, position);                     shown = false;         if (position.split("-")[0] == position.split("-")[2])         position = anti(position);                 }             });          });      }(jquery);      var anti = function (position){       if (position == "left-to-left")         return "right-to-right"         else            return "left-to-left"     } 

1. css :- right 500px. intital position of card fixed. changed dynamic based on input , whenever adding right(css) have make sure left(css) null because if give both right , left confused during animation
2. left-to-right & right-to-left both have initial , final position same.. no need of fittings.. work if come down
3. left-to-left & right-to-right don't have have initial , final position same .. left-to-left become right-to-right in reverse loop. did using anti function