How to insert a new tween between 2 others using GSAP 3?

[Goliath]

I have a timeline that has many tweens added to it.  I would like to be able to insert a new tween in between 2 tweens without overlapping any of them.  How would I do that?  also, similar to that question, how would I prepend new tweens in a timeline instead of adding them at the end of it?  Do I need to create a label like "Beginning" and shift all children by the duration of the new tween then insert it after that label?  Thank you.

[GreenSock]

1 hour ago, Goliath said:

I have a timeline that has many tweens added to it.  I would like to be able to insert a new tween in between 2 tweens without overlapping any of them.  How would I do that?

Are you saying you want to put it between them as in MOVING the later tweens further down the timeline to make room? For example, let's say you've got two 1-second tweens back-to-back starting at time 0. So you want to insert a 3rd tween between so that the 2nd tween changes its startTime from 2 to 3 (seconds)?

 

If so, you can use shiftChildren()

 

If you're not familiar with it, I'd definitely recommend getting to know the position parameter. It's crazy powerful. It lets you place your tweens wherever you want. But it sounds like you actually want to MOVE some tweens after you've already added them to the timeline which is what shiftChildren() is for. 

 

Also keep in mind that you can nest things as deeply as you want in timelines. So, for example, if you've already got a timeline that's built and you want to "prepend" another sequence, you could of course shiftChildren() but you could also do this: 

let master = gsap.timeline();

master.add(firstSequence)
      .add(secondSequence)

Now you've got them sequenced in a parent timeline. 

 

Tons of options. 

 

Have fun!

[Goliath]

Thank you.  I guess I have to use the shiftChildren().  I was hoping there would be something like insertBefore() or insertAfter() functions that can take the current playhead, a tween or even an array position (since I assume the tweens are stored into an array internally...?) as a parameter that would do the automatic checks and calculations to insert the new tween.  Seems like that would be a common operation.

[GreenSock]

13 minutes ago, Goliath said:

I was hoping there would be something like insertBefore() or insertAfter() functions that can take the current playhead, a tween or even an array position (since I assume the tweens are stored into an array internally...?) as a parameter that would do the automatic checks and calculations to insert the new tween.  Seems like that would be a common operation.

It's actually not common at all. It's highly unusual to build a timeline and then go back and try to wedge other stuff in there, shoving existing stuff out of the way, etc. It's totally doable, of course. The problem with what you suggested is that timelines can have hundreds or thousands of children that have all kinds of overlaps, so let's say you've got something like this: 

|---- tween1 ---|
     |-- tween2 --|
  |- tween3 -|
     |<-- INSERT NEW TWEEN HERE

What would you expect to happen with the other tweens? See how that new insertion position intersects with tween1 and tween3? Hm. Do those move? The insertion point is directly on top of the startTime of tween2 - should that one get moved? 

 

It can mess with the coordination of things too. For example, maybe tween1 and tween2 are part of a really cool overlapping effect...but then if you wedge a new tween in there later and it shoves tween2 out of the way, it breaks that coordination. There's also the issue of nested timelines. What if you insert something at a spot on the parent timeline that's right in the middle of a child timeline that has various tweens of its own (some that are before, some after, and some that overlap with the new insertion position)? Moving those children would also affect the overall duration of their parent. 

 

I think shiftChildren() should give you everything you need to accomplish what you're after, though, and in my opinion it's relatively clean/clear. I'm having a tough time seeing what improvement an insertBefore() or insertAfter() method offers. Perhaps you could provide some pseudo code and compare it to what it'd take to accomplish a similar thing with shiftChildren()? I'm also concerned that those methods might create confusion, like would people expect that an insertBefore(), for example, would move ALL existing children after that insertion point further down the timeline or would they think they're just inserting it without moving anything? And again, how would people expect overlaps to be handled? And nested stuff?

We're always open to improvements to the API/tools, though, so feel free to explain further if you think there's a good opportunity for improvement without creating confusion or bloat. 

[Goliath]

Thanks for the feedback.  I would respond to that insertion suggestion by saying that it is the responsibility of the programmer on what will happen if they insert a new tween before or after an existing one.  If it messes negatively with other intersecting/nested tweens inside the timeline, well, the programmer should have known better and not do the insert in the first place.

 

In my case, I do not have any intersecting/nested tweens.  They are all added 1 after another and only 1 is animated at any given time inside a single timeline.  To put it into a simple example, I have lets say 5 DOM (A, B, C, D, E) elements and I'm basically tweening from 1 DOM element to the next in the order they were added.  Suddenly I have a new DOM element (F) that I want to add right after element 2 for example.  My timeline would then look like A, B, F, C, D E and the timeline will play in that order from that point on.  GSAP would take care of doing all the children shifts needed so that the new tween F does not overlap the target tween (ie: the one we specified in the insertBefore() or insertAfter() function call) in the timeline.

 

Those functions can accept optional parameters that can control whether the insertion should shift any tween child forward to make room for the new tween.   Be default, it would not make room in order to keep the same logic as your current GSAP positional add().

 

Of course, I could write my own 2 insert functions that will do all those calculations, but I think this should be a built-in functionality of GSAP.  You already  have the time position option in the add() function.  We just need a way to specify the tween index to add before or after, like maybe <[3] or >[3], would respectively to an insert before and after the 4th tween in the timeline.

 

I hope my current project will make it big soon and GSAP has played a big role in making it become reality.  Stay tuned...

[GreenSock]

I do appreciate the suggestion. I definitely wouldn't want to reference children by numbers like that since that only really makes sense when everything is sequenced but that's very often not the case. You may have 20 tweens that all start at exactly the same time, so what would "the fourth tween" mean in that scenario?

 

So insertBefore() and insertAfter() would have to have some way of referencing the child animation, right? So is that even practical? Like...people don't normally save every tween reference in a variable:

let tween1 = gsap.to(...);
let tween2 = gsap.to(...);
let tl = gsap.timeline();

tl.add(tween1).add(tween2);

// and then later...
let tween3 = gsap.to(...);
tl.insertBefore(tween2, tween3);

See what I mean? I just don't see people doing that kind of thing since it's so verbose/clunky. 

 

But maybe I'm misunderstanding you, so if you still think this is an idea we should pursue, I think it would really help if you provided pseudo code that shows exactly how your proposed methods would improve things compared to the existing way. 

 

Glad to hear GSAP has played a big part in bringing your current project to life! 👍