Thank you Carl and Jonathan for looking into this.
Just to clarify, I'm using the timeout in the tick to start animating only when the user stops scrolling for more than 500ms. Here's a fork using the requestAnimationFrame tech and using a different timeout approach. http://codepen.io/rgbjoy/pen/zKzGzy?editors=0011
var scrollPos = 0;
var ticking = false;
var timeout;
function scrolling(scroll_pos) {
console.log('Scrolling to ' + window.pageYOffset );
clearTimeout( $.data( window, "scrollCheck" ) );
$.data( window, "scrollCheck", setTimeout(function() {
window.removeEventListener('scroll', tick);
clearTimeout( $.data( window, "scrollCheck" ) );
console.log('DONE scrolling. STOP listening.');
// aniamte scroll
console.log('Animating...');
TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){
window.addEventListener('scroll', tick);
console.log('DONE animating. Start litening. Scrolled to: ' + window.pageYOffset );
}});
}, 500));
}
window.addEventListener('scroll', tick);
function tick() {
scrollPos = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
scrolling(scrollPos);
ticking = false;
});
}
ticking = true;
}
I mean it seems like there's a weird thing going on. Maybe a rounding error that doesn't settle and moves the scrollbar again? I just expect onComplete to be the end of the road of my program. It's weird it happens on occasion as well...