Playing a progress controlled timeline in reverse

[rflc]

Hello. I'm stuck tryin to reverse a timeline controlled by  page scrolling. I'm calling a function with tl.progress(%) everytime the scroll event fires, but when I apply tl.reverse() and tl.progress(%) or simply tl.progress( decreasing %) nothing happens.  Not sure what I'm doing wrong.

[Shaun Gorneau]

I think the problem is (if I'm understanding you correctly) is that progress is not set with x% ... it's set with a value 0 to 1 (.5 being the halfway or 50% mark).

 

So, you should not deal at all with % or +/- values when setting progress. It would simply be a calculation of scrollPosition/documentHeight. That formula will always return a positive value (save for elastic scrolling where negative values can become a factor) >= 0 and <= 1.

[rflc]

Yes I used that representation for illustration purposes. I'm supplying values from 0 to 1 and viceversa when scrolling back. This is what I got so far:

 

var animate = (function(){
    // Scene one
    var one = function(pct, rwd) {
        let tl = new TimelineMax({paused: true});
        if (rwd)
            tl.reverse(pct);
        tl.to('#hand', 2, {opacity: 0})
            .set('#ip', {attr:{mask: ""}}, 1.5);
         tl.progress(pct);
    }

    // Scene two
    var two = function(pct, fwd){
        let tl = new TimelineMax({paused: true});
    }

    // Scene three

    var three = function(pct, fwd){
        let tl = new TimelineMax({paused: true});
    }
    // Scene Four

    var four = function(ptc, fwd){
        let tl = new TimelineMax({paused: true});
    }

    var arr = [one, two, three, four];

    return arr;
})();


var play = (function(){

  // closure scope
  let length;
  let lastY = null;
  let i = 0;

  //function called by the event listener
  return function(e){
    let frame = scene[i].getBoundingClientRect();
    let cam   = camera[i].getBoundingClientRect();
    length    = cam.height - window.innerHeight;
    // Determine scroll direction
    if (lastY < window.pageYOffset) {
      if (frame.top >=  0 && frame.bottom <= window.innerHeight) {
        // Get camera scroll percentage
        let pct = ((cam.top / length) * -1).toFixed(2);
        animate[i](pct, 0);
      }
      else if (frame.bottom < 0) {
        i++;
      }
    }
    else {
      if (frame.top <=  0 && frame.bottom <= window.innerHeight) {
        let pct = ((cam.top / length) * -1).toFixed(2);
        animate[i](pct, 1);
      }
      else if (frame.top > window.innerHeight && (i > 0)) {
        i--;
      }
    }

    lastY = window.pageYOffset;
  }
})();

 

[Shaun Gorneau]

Here is a CodePen briefly illustrating the user's scroll position dictating the timeline's progress.

 

See the Pen mgPrRW by sgorneau (@sgorneau) on CodePen