Search code examples
jqueryanimationscrolllagsinglepage

jQuery animations lag and jam

I'm working on this single-page site, few things (h1 opacity, nav height, etc) are animated based on scrolling. Initially it works, but after scrolling around a bit, heavy lag and unexpexted behaviour is experienced (eg. non-stop toggling of nav height for a few seconds). Tried velocity.js and transit.js, same thing happens. I've made this simplified pen to demonstrate:

http://codepen.io/galingong/pen/BHeyz/

Am I doing something wrong or is this a browser issue?I'm testing in Chrome 35.

Solution

  • Simple use stop() before animation. This problem is happenning cause all your animation are queued after each other, and this queue get longer with each animatio. Using stop() ensure to stop all previous animation for specific element & starting from new point.

    E.g.

    $('header h1').animate({opacity:0},300);

    change to

    $('header h1').stop().animate({opacity:0},300);