Confusion over "set" with multiple composed timelines

[onedesign]

I'm running up against an issue that I've noticed before, but always hacked around rather than really figuring out what is going on, but this time it's a little more challenging to find a workaround that doesn't make my code significantly worse, so I thought I'd ask about it here.

 

It's pretty common for me to create one big timeline by composing together multiple smaller timelines. For example (or check out the attached codepen):

var createFooTimeline = function() {
  var fooTl = new TimelineMax();
  …
  return fooTl;
};

var createBarTimeline = function() {
  var barTl = new TimelineMax();
  …
  return barTl;
};

var fullTl = new TimelineMax()
  .add(createFooTimeline())
  .add(createBarTimeline());

However, if any of those generated timelines uses `.set()` to set the initial state of any elements, that `set()` seems to only occur the first time the sub-timeline is played. Any subsequent plays (typically by jumping back to the beginning of the timeline) the elements won't be set and the timeline behavior will be odd.

 

This makes it very difficult to compose multiple timelines in this way, because it means you can't keep the `.set()` for these elements where it makes the most sense, with the creation of the sub-timeline.

 

Can anybody help illuminate this for me?

 

 

See the Pen zNELLL by cmalven (@cmalven) on CodePen

[onedesign]

I'll add that I generally get what is going on here: that the `.set()` is firing as soon as the timeline playhead gets to the point in the timeline where those sets occur. What I don't understand is why the behavior is different the first time the animation plays.

[PointC]

Hi onedesign 

 

I asked almost the exact same question when I was first wrapping my brain around all of the concepts of GSAP.

 

I think Carl's answer in that thread can clear things up for you:

 

https://greensock.com/forums/topic/13340-nested-timelines-and-immediaterender-of-set/

 

Hopefully that helps.

 

Happy tweening.

 

[onedesign]

Thanks for the reference, PointC

 

I've created a new CodePen though following Carl's advice in that thread, and no dice. Still doesn't seem to accomplish the behavior I'm looking for. Can you see anything wrong with this code?

 

See the Pen JEraLd by cmalven (@cmalven) on CodePen

[GreenSock]

Howdy onedesign. Could you describe the behavior you desire? I looked at your codepen and didn't see any unexpected behavior. 

 

If you place a set() at a particular time on a timeline, that's when it's supposed to happen, and then if you rewind it would revert to the previous state. The only minor exception is for convenience, GSAP will set immediateRender:true for any set() that's at the very beginning of a timeline that's not paused (because it assumes your intent is to make that happen INSTANTLY). So it just renders that immediately, but otherwise it behaves identically to if immediateRender was set to false. 

 

Two tips:

1. If your goal is to set the initial state, just use a regular TweenLite.set() so that it's not actually baked into the timeline. Otherwise, if it's on the timeline and you move the playhead backwards past that spot, it should render its previous state (and it does), but it kinda sounds like you don't want that in this case. 
2. I noticed you do a set() and then a to() on the same element - you could simplify that to a fromTo() call. 

[onedesign]

Thanks, GreenSock. The behavior you're describing does make sense (and already mostly made sense even before posting this) I was mostly looking for some guidance on how to accomplish this in an elegant way that didn't require doing anything gross with my code.

 

Your idea of just using TweenLite.set() as simple as it is, is exactly what I need to do here. Works like a charm.