wieslawski

@GreenSock In the first post I wrote: 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): https://codepen.io/Dariusz-Zarzycki/pen/RwExRQX Obviously, it can be easily modified to use custom positions as well.

@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: https://codepen.io/Dariusz-Zarzycki/pen/WNLXBEB 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.

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.

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?