Trying to understand timeline.tweenTo and its relation with the position parameter

[Guest]

Hello! I'm trying to understand how the position parameter is affected by the "tweenTo" method. From this demo, I tried to make the blue box achieve the same starting point from both forward (0 to 1) and backward (1 to 0) directions (to follow the starting point of the red box), but even after using the "<" position parameter, the blue box doesn't start at the same time when returning (1 to 0). If the timeline is going from 1 to 0 — from my understanding —, the blue box should animate along with the second ".to", as I'm using the "<" parameter. Am I missing something?

(sorry if my English is bad)

See the Pen wvZWzgX by projects-yuri (@projects-yuri) on CodePen

[mvaneijgen]

You have to view a timeline as a video you watch on Youtube, if you scrub it backwards it displays the exact same thing as it does as it was playing forward, but in reverse. Eases play in reverse but also the order in which things play is in reverse. The animation is already done, you can't change anything about it when reversing. 

 

Please explain the problem you're trying to solve instead of the solution you'll think you need, so that we don't fall in the classic https://xyproblem.info

[Guest]

18 minutes ago, mvaneijgen said:

You have to view a timeline as a video you watch on Youtube, if you scrub it backwards it displays the exact same thing as it does as it was playing forward, but in reverse. Eases play in reverse but also the order in which things play is in reverse. The animation is already done, you can't change anything about it when reversing. 

 

Please explain the problem you're trying to solve instead of the solution you'll think you need, so that we don't fall in the classic https://xyproblem.info

I'll try to understand my problem better to explain, sorry for the inconvenience

[mvaneijgen]

Here is your pen with GSDevTools installed. Now you literally get a progress bar like you get on a video. A timeline does the exact same thing in reverse, but backwards. 

 

If you want two tweens to start at the same time playing forward and playing backwards you don't want to put them on a timeline you just want two separate tweens on which you call .play() or .reverse() and they will do what you want. 

 

Again to emphasise, a timeline is as creating a video and after the video is "rendered" nothing will change in the video (you of course still can change things, because we're working with code here, but as a general rule of thumb, nothing will) 

 

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