jquery animate back to original position on scroll DOWN(?)

Question

I have searched high and low and can't seem to find answers. I am a jquery novice and I have all animations working correctly on ScrollTop however when I scroll to get back to the top of the page, I would like the one stripe with the text to come back to it's original position. Ive gotten as far as it flickering, so I think Im on the right track. Please help.

Here is the website: www.artdesignstudios.com/prestige/

Here is the script Im working with:

<script>
$(window).scroll(function(){
    if ($(window).scrollTop() >= 100){
        $('#stripe1').animate({'width': 0},1000);
    $('#cta1').animate({'left': -100},1000)


    }
    else if ($(window).scrollTop() < 400) {
     $("#stripe1").css({'width':'100%'},800);
     $("#cta1").css('opacity','1');
    }


});

</script>

Answer 1

Basically the main problem of the flickering is that the conditions don't suffice if both cover the same range, which is the case I mentioned in comments.

N < 400 can also be >= 100 and after 400 everything is >= than 100

For that problem we need to make adjustments for them to cover different ranges of scroll, or, use a boolean var to make sure the animations will run accordingly to what is expected. An option is to apply these changes, respecting the different ranges we can test with 150 as scroll height:

var animated = false;   //added variable to control if stripe was animated
$(window).scroll(function () {
  if (!animated && $(window).scrollTop() >= 150) { //changed
    $('#stripe1').animate({'width': 0}, 1000);
    $('#cta1').animate({'left': -100}, 1000);
    animated = true; //it was animated

  } else if (animated && $(window).scrollTop() < 150) { //changed
    $("#stripe1").css({'width': '100%'}, 800);
    $("#cta1").css('opacity', '1');
    animated = false; //animation ended
  }
});

Check this FIDDLE to see it in action