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

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.

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

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.

@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)

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.