What if a timeline is half way through? how do you run the rest of tweens accordingly to a random start position?

[Elindo]

For example, here is a time line where  cylrod should go to x:200 when the stratbtn is activated. (works great if it starts from x:0)

 

Apparently the timeline assumes that cylrod will always start at x:0... but what is cylrod starts at x:100 ???

 

The problem is that the duration:5  stays in place for the rest of the time sequence even if cylrod starts at x:100

 

What if cylrod starts at x:200???   Then I would like the sequence to start at the first "+=0.1" delay..  why? because with my next to nothing knowledge about coding I think that  the first line of "+=0.1" assumes that cylrod has now reached the position of x:200, and so now the rest of the timeline can proceed.

 

is there a way to tied the duration and sequence of the timeline given whatever random position cylrod might start to go to the end positon of x:200?

 

 

 

var extend = gsap.timeline ({paused:true});
extend.to(cylrod, {x:200, duration:5, ease: "none"}); 
extend.to(pline1, {opacity:0, ease: "none"}, "<");
extend.to(rvarrow, {y:0, duration: 0.1, ease: "none"}, "<");
extend.to(sola, {opacity:1, ease: "none"}, "<");
extend.to(aline1, {opacity:1, ease: "none"}, "<");
extend.to(aline2, {opacity:0, ease: "none"}, "<");
extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1");
extend.to(rvarrow, {y:-14, duration: 0.1, ease: "none"}, "<");
extend.to(aline2, {opacity:1, ease: "none"}, "<");
extend.to(sola, {opacity:0, ease: "none"}, "+=1");
extend.to(aline2, {opacity:0, ease: "none"}, "<");
extend.to (pline1, {opacity:1}, "<");
extend.to (bline1, {opacity:0}, "-=5");
extend.to (bline2, {opacity:0}, "-=5");
extend.to (solb, {opacity:0}, "-=5");

 

See the Pen xxrbWyY by Elindo586 (@Elindo586) on CodePen

[GreenSock]

Please see the comments posted on your other thread - I think they may clear a lot of things up for you: 

 

I'm having a difficult time understanding exactly what you're asking which is why we keep requesting minimal demos, but it sounds to me like you probably just need to structure your logic differently. For example, if you want things to be very dynamic (like NOT having pre-determined starting values), don't reuse the same timeline instance over and over again. Instead, create a function that you call which creates a NEW timeline animating to the state you want so that it dynamically adjusts to whatever the starting values are at that time. Or it may work fine to just call .invalidate() first each time so that starting values are flushed. But again, since I don't quite understand what you're asking, it's difficult for me to know if my advice here addresses your question. 

 

It'd be best to avoid starting a bunch of different threads about the same general questions. 

 

Thanks.

[Cassie]

Hey Elindo,

I'm struggling to understand your question - which I assume is because you're at the beginning of this journey and don't (yet) know the names for the concepts you're looking for. It's a common hurdle. Half of coding is learning the names of things so you can google solutions.

Could I ask you to step back slightly and explain, in steps and simple english (no coding jargon) what it is that you're looking to achieve.

If you can let us know *what* you're trying to do - we can show you how we'd do it and explain why.

 

[Elindo]

I am back!

 

I will make a different drawing and it might be easier to visualize....  Might be easier to understand if you see a big box moving instead of a little rod symbol. 

 

But basically, in this post what I am looking for is the item "cylrod" to move from x:0 to x:200 in 5 seconds,  which it does fine as long as "cylrod" starts moving from x:0.

 

The problem is when cylrod DOESN'T starts the movement from x:0.. then the entire sequence still taking 5 seconds to complete... 

 

 

[PointC]

On 8/27/2021 at 10:29 AM, GreenSock said:

For example, if you want things to be very dynamic (like NOT having pre-determined starting values), don't reuse the same timeline instance over and over again. Instead, create a function that you call which creates a NEW timeline animating to the state you want so that it dynamically adjusts to whatever the starting values are at that time.

It sounds like Jack has the answer for you here. You'd probably be better off going this route. That way you can figure out where the target is and set the duration accordingly. 

 

Since you want the target to move from x:0 to x:500 over 5 seconds, you could easily calculate a new duration depending on which button is clicked. Say the target is currently at x:250. Then your function would probably need to create a tween with a duration of 2.5 seconds to either go back to x:0 or forward to x:500. This will prevent any jumps in the animation since it will start wherever the last tween ended.

 

If you want to make a more simplified demo, we can probably point you in the right direction. It's also best to fork the demo each time you make changes so we can see what's been updated. Thanks. 

[Elindo]

I added a new demo with a more visual system to see.

 

The x:0 to x:200 or x:200 to x:0 is the full distance of a run....   however, the run can be interrupted at any moment in any place, and it needs to be picked up again at any given direction depending on the button being pushed.... but.. I will get to that point later.... 

 

the new tread is this one: