Tom

The solution was to use children instead of childNodes. Oops. Sips more coffee.

Strangely I'm seeing the errors only on local development but not on codepen. I tried adding the CSS plugin but errors still persist. Any idea? The solution was to use children instead of nodeChildren. Oops.

Yeah that works but just seems like a weird hack. But thanks again for all the help and taking the time.

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...

Here's the StackOverflow question before this post: http://stackoverflow.com/questions/39711783/the-window-detects-scrolling-inexplicably/39713742#39713742 I have a fairly simple function that detects a window scroll. Fires a timeout event (500ms) when the user stops scrolling. This ends then listener and timeout. I then animate(GSAP) the window to a certain point. Once the animation is complete, the listener is fired up again. Sometimes... a scroll is detected again, so the whole function is fired twice. Please look into console to see this happening. code here: var timeout; var onScroll = function() { console.log('scrolling...'); if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function () { console.log('done scrolling... stop listening...'); $(window).off( "scroll", onScroll); clearTimeout(timeout); timeout = null; // aniamte scroll console.log('start animating scroll...'); TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){ $(window).on( "scroll", onScroll); console.log('done animating scroll. Start litening again.'); }}); }, 500); } $(window).on( "scroll", onScroll); example: http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011 How is this happening? Should I be asking quantum theorist?

@OSUblake Here's what I mean: http://codepen.io/rgbjoy/pen/VjNjPj/?editors=0010 I hope I gave someone a good laugh at this attempt. But does GSAP have any feature to automatically run through an array of values like that?

var array = ['1','2','3']; TweenMax.to('foo', 3, {foo:array}); I would think staggerTo would work... is there a way to increment through an array with just one line like this?

This is flickering for me. Wouldn't you need to set the image opacity initially with CSS and somehow have from() go from 0 to 1?

I have a 30sec Linear.easeNone tween happening but I want only the last 2 seconds to Sine.easeOut. Is this possible?

Is there a way to have reverse appended to the timeline? I'm trying to make a typewriter effect, so when the letters are typed out, it'll reverse it, and type a new sentence. Kind of like you're backspacing the sentence.