Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mamorukun

Superpose two timelines with different durations

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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? 

 

 

Link to comment
Share on other sites

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" 😅)?

Link to comment
Share on other sites

  • Solution
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? 

  • Like 2
Link to comment
Share on other sites

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 :D

  • Like 2
Link to comment
Share on other sites

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 :D

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

  • Like 1
  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×