timelines in timeline

[benoit 55 Likes (Contributor)]

Hi,

 

I think I do it this wrong… and it's not like expected 😕

 

 

See the Pen jOeVoaO by benoitwimart (@benoitwimart) on CodePen

[Cassie 5,649 Likes (Superhero)]

Hi there - could you explain what are you expecting and what is wrong?

Thanks!

[benoit 55 Likes (Contributor)]

The final sub timeline will be more complexe (like Morph), but for now with  the same mouvement and the same seek, positions are different.

[Cassie 5,649 Likes (Superhero)]

Sorry that's not making much sense to me - could you try again?

 

What is it that you are trying to attempt with the code you've linked to above? 

What is happening, and what do you think the result should be.

[benoit 55 Likes (Contributor)]

Codepen updated with comments and result under the line…

 

[Cassie 5,649 Likes (Superhero)]

Oh, alright - I think the confusion is that you're creating a new timeline every time you call your timeline creation function -  tlsub('.a') or tlsub('.b')
 

So when you call seek again, you're not calling seek on the first timeline, you're making a new timeline with a new animation on the same element and calling seek on that second timeline.

I can't really advise on a better route because I'm not sure of the end goal. But that's what's happening.

[benoit 55 Likes (Contributor)]

OK, I will make an array of TL

 

[Cassie 5,649 Likes (Superhero)]

This may help too? Another way to grab a timeline after creation

https://greensock.com/docs/v3/GSAP/Timeline/getById()

[benoit 55 Likes (Contributor)]

Is there a  better way to make this, without "tl.call()" ?

[benoit 55 Likes (Contributor)]

4 minutes ago, Cassie said:

This may help too? Another way to grab a timeline after creation

https://greensock.com/docs/v3/GSAP/Timeline/getById()

I will try to remember this ><

[GreenSock 18,876 Likes (Superhero)]

I glanced at your code too and I'm very confused about what you're trying to do. If you can explain your goal, perhaps we can offer advice on a better way to accomplish it. 

 

You seem to be misunderstanding how things are supposed to work or the logic flow. Let's consider just these two lines: 

tl.call(e=>tlsub('.a').seek(5,false),null,1); // go to 5s -> 250px is OK
tl.call(e=>tlsub('.a').seek(2,false),null,2); // go to 2s -> 100px is not OK

When the timeline reaches 1 second, it calls that first line which creates a whole new paused timeline animating the element's x from wherever it is currently (0) to 500 over the course of 10 seconds, so since you seek(5), that means it's halfway to 10, thus x is 250. Great. Then the next line creates a whole new paused timeline animating the element's x from wherever it is currently (250) to 500 over the course of 10 seconds. Since you then seek(2), that's 20% of the way from 250 to 500 which is 300. 

 

Everything is working exactly the way you've asked it to. 

 

But again, I don't really understand why you're doing all this so it's hard for me to offer advice.