Superpose two timelines with different durations

[Mamorukun 10 Likes (Newbie)]

Hi everyone !

 

as you can see in this simple codepen, let's say I have a user A who sends me his timeline (I don't know its content, just its TotalDuration), and a user B who sends me his own timeline. The problem is that user B would like his timeline to fit the user A timeline, with a part of his own timeline beginning at the start of user A timeline, and another part finishing exactly when user A timeline finishes. In other words, user B would like me to add a delay at a specific point of its timeline so that it will run exactly the same time than timeline A. Is there a simple way to do so ?
 

To sumarize, so far, the only things I am sure t know are timeline A and timeline B durations, and the exact label of timeline B where I should add a delay to achieve the desired result. My first thought was to calculate timelines duration difference (let's say, n), and insert a "dummy" timeline.to("", { duration: n }) at the specified label of timeline B. But that sounds like a trick to me and I was wondering if there was a proper way to achieve the same result.

 

Thank you very much in advance ^^

See the Pen KKqpaxd by st-phane-smirnow (@st-phane-smirnow) on CodePen

[GreenSock 18,248 Likes (Superhero)]

I'm a little fuzzy on the logic here - so you don't want to stretch/squash one timeline (timeScale) to fit into the same duration as another, right? You actually want to MOVE everything after a certain spot in timeline forward and create a gap? 

 

For example, tlA is 5 seconds and tlB is 3 seconds but you want to make tlB's duration 5 too? And to do so, you want to insert a gap somewhere specific? 

 

What if tlB has some tweens that span the entire 3 seconds, and some that start halfway through, and others that span arbitrary amounts of time: 

 

|---------------------| // 1
|---------------------| // 2
           |----------| // 3
  |-------------|       // 4
        |-----------|   // 5

What would you do with those tweens exactly? What if your "stretch point" (maybe it's at 2.4 seconds) chops some and not others? 

 

 

[Mamorukun 10 Likes (Newbie)]

Yes, you perfectly got my problem ^^ Your case won't happen at my side, because tLB will ALWAYS be splitable in exactly two parts through the presence of a 'split' label (perhaps should I have specified that ealrier). In other words, as explained by the text of the labels of tlB in my codepen, there'll be always a "cut point" in tlB where I'll have to add a gap.

 

So yes, indeed, it's not exactly "stretching" tlB (its tweens won't last longer), but rather making it longer with a programmaticaly specified gap so that, at the end, the two tl matches. With that complement of information, would you say that there is a proper way to do so, or do I have to add a "dummy" tween inside tlB at the split point as I was thinking in the first place ?

 

NB : in case of the answer would be "insert dummy tween", I'd like to ask a bonus question if you don't mind: is there a function of a timeline which would let me know if yes or not it contains a given label (because yes, I didn't specified it yet, but user B has the opportunity to send me his timeline saying: "play everything at start of tlA, I didn't set a 'split' label in it" 😅)?

[GreenSock 18,248 Likes (Superhero)]

19 minutes ago, Mamorukun said:

tLB will ALWAYS be splitable in exactly two parts through the presence of a 'split' label

Then I guess you can use .shiftChildren()

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

 

No need to put a dummy tween in the middle - the only time it can be useful is if you're trying to stretch out the END of the timeline beyond where the children end naturally. 

 

As for knowing whether or not a particular label exists: 

if ("myLabel" in timeline.labels) {
  ...
}

Does that clear things up? 

[Mamorukun 10 Likes (Newbie)]

What is clear is that, now, I definitively LOVE gsap ❤️ Thank you Jack, that'll clearly make the logic simplier to code, AND the given code simplier to comprehend by my collegues

[GreenSock 18,248 Likes (Superhero)]

11 hours ago, Mamorukun said:

What is clear is that, now, I definitively LOVE gsap ❤️ Thank you Jack, that'll clearly make the logic simplier to code, AND the given code simplier to comprehend by my collegues

Yay. We do often hear that the more you dig into the API and understand GSAP, the more you tend to fall in love with it. Once you get past the initial learning curve, I hope you'll find that things really "click" and make a lot of sense. Once the light bulb goes on, watch out - you'll be an animation superhero in no time