Jquery slow reaction time

Question

I try to use the jQuery for my header animation, the animation slows down after I added:

else if (headeranimated && $(this).scrollTop() > 1200)
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)

I have to wait a couple of seconds for the second part of animation. Is there anything wrong with this code?

Thank you

 // header animation
var headeranimated2 = false;
var headeranimated = false;
var headeranimated3 = false;

$(window).scroll(function() {
  if ($(window).width() > 800) {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        left: "-40%"
      }, 800);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() > 1200) {
      $('#headerpattern').animate({
        top: "-20%"
      }, 200);
      headeranimated2 = true;
    } else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) {
      $('#headerpattern').animate({
        top: "0"
      }, 200);
      headeranimated2 = false;
      headeranimated3 = true
    } else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        left: "0"
      }, 800);
      headeranimated = false;
      headeranimated3 = false;
    }
  } else {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        top: "-8%"
      }, 1200);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        top: "0"
      }, 800);
      headeranimated2 = false;
    }
  }
});

Answer 1

well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).

the solution: if animation still played - don't scroll

var animScroll;

$(window).scroll(function()
{
    if (animScroll) return;

    if ($(window).width() > 800)
    {       
       if (!headeranimated && $(this).scrollTop() > 500) 
       {
         animScroll = true;
         $('#headerpattern').animate({ left: "-40%"}, 800, function()
         {
            animScroll = false;
         });

         headeranimated = true;
     }

     // rest of code

Answer 2

A scroll even is an event the is emitted continuously while scrolling, so it will be triggered multiple times a second while you are scrolling.

Whenever you call .animate for an element, the animation is added to a queue. And the animations are executed one after the other, in the order they where added to the queue. As your animations have a duration of in a range of 200 to 1200 you might result in an animation queue that has a duration of several seconds.

One solution would be to call .stop() before you call .animate:

$('#headerpattern').stop().animate(....)

But this might break your desired effect.

Another solution would be to check if there is an animation that is currently running and if so, then do not start a new animation. But this will have some kind of stop and go or delay effect.