[Getting `Invalid property` errors using forEach]

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

[Getting `Invalid property` errors using forEach]

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.

 

See the Pen abZjmVw by rgbjoy (@rgbjoy) on CodePen

[ScrollTo maybe scrolling after onComplete]

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

[ScrollTo maybe scrolling after onComplete]

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. 

See the Pen zKzGzy?editors=0011 by rgbjoy (@rgbjoy) on CodePen

 

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

[ScrollTo maybe scrolling after onComplete]

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:

 

How is this happening? Should I be asking quantum theorist?

 

See the Pen RGVLBK?editors=0011 by rgbjoy (@rgbjoy) on CodePen

[Tween through array for values]

@OSUblake
 

Here's what I mean: 

See the Pen ?editors=0010 by rgbjoy (@rgbjoy) on CodePen

 

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?

[Tween through array for values]

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?

[Starting opacity when autoAlpha fading from 0 to 1]

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?

[Delayed easing?]

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

[Append a reverse()?]

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.