Make an animation with scrollTop

Question

animate = animate; desanimate = undo animate; 

Friends, I created a function that executes the animate or 'desanimate' element depending on where the body scroll or div is located, it works fine, how does it work?

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

The first value of the data-animation-time array is the initial value, that is, the animator function must be called when scrollTop passes this value, the second value is end , the 'desanimate' value should be called when scrollTop passes this value.

Everything you can see here → Codepen: http://codepen.io/celicoo/pen/ogKGEP (you need to scroll to see how the animation happens).

Now I want to determine how the animation will happen and how it should end, for which I changed this attr:

data-animation-position="right-to-left" instead of right or left , and I will add some ifs statements to the animation and '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 it doesn’t work in desanimate, something doesn’t work well, and I really can’t understand what it is.

Can anyone give me a hand here? What could be “desanimate” doesn't work when I flipped the step values?

Example:

 left-to-right right-to-left 

Codepen with old code working only on one side (for example: left or right),

The code with the new code does not work 100% with several sides (for example: from left to right, from left to right, from right to right or from right to left),

Answer 1

Updated link codepen. Just look and let me know if this meets the requirements.

  + 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" } 

• Css: - it was correctly 500 pixels. therefore, the fixed position of the card is fixed. I changed it to dynamic based on input and whenever you add right (css), you have to make sure left (css) is null, because if you give both right and left, it will get confused during animations
• from left to right and from right to left, both have their start and end position the same .. so there is no need for additional fittings .. so it will work even if you come from
• from left to right and from right to right they do not have their starting and ending positions equally. therefore from left to right right to right. I did it with the protection function