[Playing a progress controlled timeline in reverse]

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;
  }
})();

 

[Playing a progress controlled timeline in reverse]

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.

[Reposition after scale]

@mikel  That's a great, concise example and I learned quite a lot from it.  Thank you.

 

@OSUblake Wow thanks for the different examples. That Bezier example is impressive. Really big thanks for your help.

[Reposition after scale]

Hi guys, sorry it is taken me this long. 

 

@mikel That's a very clever way to center elements. I need to translate to the center after the element is positioned with CSS in order to make the text to wrap around it. But I will save your technique for the future. Thanks!

 

@GreenSock Exactly, I need this to work in in a responsive design. Below is a demo, basically I want to animate an svg in the center of the screen and then scale it down and translate it back to its original position. Then I want to replace the svg with a picture and display the wrap around text. I worked around some issues and was able to set the parent to position: relative, but I'm still unable to center it in a responsive manner.

 

See the Pen madVGZ by rflc (@rflc) on CodePen

[Reposition after scale]

@GreenSock Thank you so much. I actually have a related question, how can I re-position  an element without position:relative to the center of the screen? I had to position the element with only margins to float text around its initial (final) position. When I try:

 

TweenMax.set('#myElement', {left:"50%", top:"50%", yPercent:-50, xPercent:-50});

 

It actually moves the element to its top left (off screen)

[Reposition after scale]

Hi, this is my first post, and as such, this is a noob question. How can I reset an object's position to the top left corner of its parent after it has been scaled?

Edit: I was abled to solve it, I just needed to reset the transformOrigin property to the top left of the object.

See the Pen ZVEQMJ by rflc (@rflc) on CodePen