Parent timeline add many child timeline & play follow position not working

[ngocducdim]

Hi, I have a parent timeline with total 10 second and 3 child timeline which will add to this parent, first child will play at second 3, second child will play at second 6 and third chill will play at second 8, but when I play a parent timeline, all child timeline play at second 3, I don't know what wrong

See the Pen jOvxRyE?editors=1111 by ngocducdim (@ngocducdim) on CodePen

[ngocducdim]

Sorry the problem solve because my silly mistake on code, I have fixed, but I have another question I want to ask, can I force the parent timeline synchronize with all children timeline? let say I seek first child timeline to second 0, the parent current second will be 3, if I seek second child timeline to second 1, the parent current second will be 7, is it posible? I have updated the codepen

[mvaneijgen]

I'm not completely sure what it is you want to do. Do you also have an explanation of what the problem is you're trying to solve. I've read your question a few times, but it seems to abstract for me, maybe explaining the real world problem you're trying to solve clears things up and maybe allows for a more elegant/simple solution. 

[ngocducdim]

Assume I have parent timeline with total duration 10 seconds, and a child timeline with total duration 2 seconds, this child timeline will start at second 5 inside parent timeline, when play the parent timeline, the timing will be like this:
- parent timeline current second : 0 <-> child timeline current second: 0
- parent timeline current second : 1 <-> child timeline current second: 0
- parent timeline current second : 2 <-> child timeline current second: 0
- parent timeline current second : 3 <-> child timeline current second: 0
- parent timeline current second : 4 <-> child timeline current second: 0
- parent timeline current second : 5 <-> child timeline current second: 0
- parent timeline current second : 6 <-> child timeline current second: 1

- parent timeline current second : 7 <-> child timeline current second: 2
- parent timeline current second : 8 <-> child timeline current second: 2
- parent timeline current second : 9 <-> child timeline current second: 2
- parent timeline current second : 10 <-> child timeline current second: 2
Now parent timeline current second is 10, I seek the child timeline to second 1, the result:
- parent timeline current second : 10 <-> child timeline current second: 1
What I want is:
- parent timeline current second : 6 <-> child timeline current second: 1
You can try the example here, let the parent timeline play finish, then click Seek child timeline to second 1, the text will show {"parent":10,"child":1} instead  {"parent":6,"child":1}

[Rodrigo]

Hi,

 

I'm not completely sure I follow exactly what's going on here and what you're trying to do.

 

Keep in mind that Timelines are just containers with special properties that Tweens don't have, that's all. In this case you have a timeline that is nested inside a master timeline. Once the master timeline gets going it will control it's own playhead, of course, but it will also control it's child tweens and timelines playheads as well. Once you update the child's playhead it will remain there, but only the child's playhead will be modified. For example in your codepen if you restart it and quickly click the button, you'll see that the red box jumps to the 1 second position, but as soon as the parent timeline reaches 5 seconds the red box timeline playhead jumps to 0, because at that point the parent timeline is now controlling the child's playhead. Same thing happens if you click the button between 5 and 7 seconds, there is no visual effect because when you click the button, but the child's playehead is set to 0, but on the next tick (normally 16 milliseconds after) the parent timeline controls the child's playhead again and moves it to the position based on the parent's current progress. GSAP is working exactly as expected.

 

In this situation is better to just control the parent's playhead based on the position of the child elements in it. For that is better to create labels as well and use those to control the playhead's position of the parent timeline.

 

Hopefully this clear things up.

Happy Tweening!

[GreenSock]

A few more comments: 

1. In your vars, you do pause: true but I think you mean paused: true (there is no pause: true). But I don't understand why you'd pause that anyway - if the child is paused, it won't play at all even inside its parent, so you'd just need to unpause it later. In summary, I'd ditch the paused: true thing in the child altogether.
2. As already pointed out, a child's playhead is controlled by its parent. So rather than setting the child's playhead to a new position and then also setting the parent's, just set the parent's which will automatically affect the child anyway. 

I think you meant to do something like this: 

See the Pen abaKJOB?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Here's a function that makes it a little easier (it's a simple calculation anyway):

// moves the parent playhead accordingly
function goToChildTime(child, childTime) {
  child.parent.time(child.startTime() + childTime);
}

Does that help? 

[ngocducdim]

- Thanks for the reply, currently I'm doing a project that contain deep nested child timelines:
Parent : -------------------------------------------------------------------------------------------------------------------->
Child 1:                                     -------------------------------------------------------------------->
Child 2(Child 1 is parent):                        ------------------------------------->
Child 3(Child 2 is parent):                                     ----------------->

- Those child timeline need to synchronize with parent timeline,  those child timeline can seek, add pause points, but with your explain I think if I seek child timeline, I have to travel upward and calculate timing until reach the parent timeline like event propagation when we click a child element in DOM and seek the parent timeline, thanks for the help!

[GreenSock]

Ah, if you need to accommodate multiple nesting levels and just go all the way up to the top level (under the globalTimeline), here's a fork with a helper function for that: 

See the Pen abajvdx?editors=0010 by GreenSock (@GreenSock) on CodePen

function goToChildTime(child, childTime) {
  let tl = child,
      time = childTime;
  while (tl.parent && tl.parent !== gsap.globalTimeline) {
    time = tl.startTime() + time / (tl.timeScale() || 1);
    tl = tl.parent;
  }
  tl.time(time);
}

Is that what you were looking for? 

[ngocducdim]

Thanks for your reply! I intend to implement something like that