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