[Nested timeline renders on next frame]

@GreenSock

In the first post I wrote:

11 hours ago, wieslawski said:

The problem is that nested timelines start running a few milliseconds later (I assume that the reason is that a created timeline is processed at the next tick)

So I was expecting this to be the problem. Regardless, thank you so much for your elaborated response, I was not aware of registering the time difference. This makes your solution is better than mine (V2 from the first post), because nested timeline is in sync with outer one.

 

I have one last question - is there no easy way to add a synced timeline so it doesn't affect the parent's total time? 

If not, what do you think of this solution (adding method to Timeline's prototype, that uses your approach):

See the Pen RwExRQX by Dariusz-Zarzycki (@Dariusz-Zarzycki) on CodePen

 

Obviously, it can be easily modified to use custom positions as well. 

 

[Nested timeline renders on next frame]

@mvaneijgen Thanks for your code. Unfortunately it does not meet my needs. Main timeline does not end (as I stated, the nested animation should be independent - meaning it should not affect the outer timeline) and there is no continuation to it.

However if I modify it just a little bit it becomes a great example of what I mean:

See the Pen WNLXBEB by Dariusz-Zarzycki (@Dariusz-Zarzycki) on CodePen

 

Each time you run it you can get a different result, but quite often you'll see result like:

MAIN TIMELINE CONTINUE, time passed: 996
ROTATING BOX STARTED, time passed: 1002

And this may cause 1 frame delay (between nested animation start, and main animation continuation) which is unaccaptable for me.

[Nested timeline renders on next frame]

Hey @mvaneijgen!

 

Thank you for your reply. I modified codepen demo according to your advice.

 

The base issue is:

I want to create an animation (let's call it OUTER_ANIM). At certain point in time of that animation I would like to start an independent, dynamically created animation (let's call it NESTED_ANIM). At the same point I would like to continue OUTER_ANIM. I would like the effects of continuation of OUTER_ANIM and start of NESTED_ANIM to be rendered in the same frame.

 

My approach is to create a timeline, and add a callback that creates the nested timeline. The result is that continuation of the outer timeline starts a few milliseconds before the start of the nested timeline (V1 in codepen demo) which can result in a single frame difference.

If I modify the approach by adding .progress(1).progress(0) (V2 in codepen demo) than it works fine, but I guess that this is not a proper way to achieve the goal.

 

[Nested timeline renders on next frame]

I am using GSAP to create multiple complex animations. Parts of such animations are detached from the main timeline - at certain points new timelines are created using a callback function. The callback function is required, because nested timelines are created dynamically and can be repeated infinitely.

The problem is that nested timelines start running a few milliseconds later (I assume that the reason is that a created timeline is processed at the next tick). This few milliseconds can result in rendering nested timeline with a single frame delay.

The fix I found is to nest timeline like this (in codepen demo I did not include the suppressEventsparameter so that nested timeline can print output): 

.add(() => createNestedTimeline().progress(1, true).progress(0, true))

It doesn't look pretty though. Is there a way to do this properly?

See the Pen MWZOxWJ by Dariusz-Zarzycki (@Dariusz-Zarzycki) on CodePen