javascript - Velocity JS Lag -

i have been using parallax time , have been using css animations , transforms , etc in order results want. after reading stuff velocity , thought giving try.

the problem animations having kind of delay. because i'm not applying velocity correctly, have researched , seems i'm doing correct.

$ability.velocity({   translatex: '-50px',   opacity: '0' });  $(document).on('scroll', function(){  var wscroll = $(this).scrolltop();  if(wscroll > $('.ability-self').offset().top - $(window).height()/1.2){   $ability.velocity({     translatex: "0",     opacity: '1'   });  } else{   $ability.velocity({     translatex: '-70px',     opacity: 0   }); } 

the problem animation happens 1 or 2 seconds after scroll after element. have checked if css attribute might interfering, didn't find relevant one.

is js bad?

assuming use of velocity correct, code causing lot of stress browser. should first cache layout values don't change:

var window_h = $(window).height()/1.2 

and:

var ability_top = $('.ability-self').offset().top 

and second, debounce scroll event handler, since scroll triggered a lot , need respond once every frame, or possibly less. debouncing use lodash's or underscore's _.debounce() or copy paste implementation, code like:

$(document).on('scroll', _.debounce(function(){     // code here... }, 50))