othbert

Ahh that's interesting, I certainly was thinking that the sub-timelines were somehow added into the execution flow of a parent timeline by virtue of having their tweens incorporated into it or something along those lines. I see now that if it's just a function call with no stored reference there would be no excessive memory usage, the return did catch me out a little bit Very cool linked post too, thanks! I think that covers it... if I have something else I'll ask but I guess the way to go about it is to add child timelines properly instead of callbacks, or change the structure to recursively call itself. EDIT: What am I thinking? child timelines wouldn't work in this case anyway, right? seeing as they would be created / evaluated on load (and not at runtime) for adding to a parent timeline.

Hi OSUblake, That's sort of it... I see the animation is fixed here, however your version of the 'staggered' function calls itself as the last action before returning a timeline. While that works in this example with just a few iterations of the cycling characters, The original intent (which I apologise for not making clear, or showing as an example in the code, I wanted to try to demonstrate just the parts of the problem I am having), is to repeat indefinitely choosing a random set of elements to 'selectAndDraw'. Would this not cause memory to get gobbled up as the timeline creates new subtimelines in the staggered function and attaches them nested to a main timeline that never completes? I do not know enough about how GSAP handles this, but if it were 'normal' JS with a recursive function in a callback that would be the case, correct? Interesting that this animation works so much better though, I can't see any difference except for the delay and repeat parameters (or the fact you call the removeLayer effectively 'onCompleteAll' of the whole hiding staggerTo, instead of after each hiding staggerTo like I've done), between this adding to itself, or my version adding to a parent timeline, that could cause such wonky animation in mine. Cheers

Thanks Carl, that's not really quite what I meant though... Here's a fleshed out codepen with more of what I'm trying to achieve. Didn't want to take it too much out of the project structure, so sorry if it's a little illegible or strangely written. There are a couple of issues with how I have it this way. 1) repeatDelay appears to affect the timing of the timeline in the sense that the "selectAndDraw" function is called multiple times per repeat iteration if there is a delay value. Without the repeatDelay, the function is correctly called only 3 times. 2) The whole idea I meant in my previous reply was that the parent timeline I create and attach to project.timeline, should have child timelines attached to it. The parent should repeat and call the child timeline functions again each iteration. The parent should be return a timeline which will help it determine when the children have 'finished' and therefore it is time for the parent to repeat. However, parent timing is unaffected by the children, it loops and that's that. Specifying a delay is just an absolute. If the child timelines take longer, they overlap with the next iteration. Setting the position on the second staggerTo in the child timeline demonstrates this. I strongly suspect I have misunderstood how to add the child timelines properly, or to call functions properly. Any assistance would be great! Thanks!

Thanks Carl! I kinda figured it could be something like this and due to a great boost in performance for typical (i.e. every other scenario where the DOM shouldn't need to be re-read) scenarios. Nevermind, I wrote a new version where I use a parent timeline to keep the abstraction of the repeat, and repeat delay parameters etc. then onStart and onRepeat of that timeline I call a function which generates a new timeline running the staggerTo's. My only issue now is a nicer way to control the timing of everything, as the parent timeline doesn't know or care about "waiting" for the child timelines to finish before repeating. Been a while since I had to handle that control and I'd like to be able to do it programmatically seing as the functionality I am creating should be used in multiple places with varying parameters etc and I don't want to have to calculate the delays for everything manually. Am I missing something easy here? A parameter on the parent timeline that can listen to the children, or something in the children to block the parent? The answers I found so far are from 2014 and involve a lot of finding out exact timings etc and extending the addPause method. Wondering if this is now implemented in the core seeing as it would seem (to me at least) to be quite a valuable and typical scenario when nesting parent and child timelines. Cheers!

Hi there, love the GSAP library, but having a strange issue that I've never really had to address before. I wish to create elements dynamically on the page outside of the GSAP timeline, then within a created timeline, have the selector pick up whatever set of elements are currently matching the selector. The issue is the set appears to be 'cached' with repeat loops of the timeline. The codepen is similar to my code, but stripped down to just the basics of what's not working. In the last staggerTo, the elements are moved and then removed from the DOM. The onRepeat calls the same function to add new ones to the DOM, but repeat loops of the timeline don't evaluate the selector contents each time. As a side note, I was a little surprised that the onStart function didn't run before the rest of the constructed timeline, including the staggerTo's. I guess just a failure in how I comprehend the staggerTos are functioning, it's related to the same issue really, in that I need to be able to tell staggerTo, only evaluate the selector once you get to whichever part of the timeline. I did manage to get this working by using .add instead of the stagger, and inside there creating new timelines being passed the same selector and returning a set of tweens. These at least seem to be executed as the timeline 'reaches' them. Hope someone can provide some assistance or help me get my thinking straight about why this is expected behaviour and the correct method I should use to achieve what I'm after. Thanks!