How to adjust a Greensock.js tween based on browser scroll y position rather than by the time?

Question

How would I go about adjusting the time manually based on the scroll position? What might that look like? To basically 'scroll' the tween? So that the tween reacts to the scrolling mouse's Y position rather than just trigger and execute based on a preset time?

Answer 1

While Tahir's answer is correct and sufficient, there's a lot of unnecessary code to show the example.

A more concise snippet is:

var max_scroll = document.body.offsetHeight - window.innerHeight;

win.addEventListener('scroll', function(){
    var scroll_perc = parseFloat(Math.min(window.pageYOffset / max_scroll, 1).toFixed(2));

    TweenMax.to(tl, 0, {
        progress: scroll_perc
    });
});

var tl = new TimelineMax({paused: true});
// the rest of your timeline....