JoeTierney

Thanks so much for the direction! I paid attention to the position parameter as you suggested and now I have this working much better. I'm also going to go ahead and use separate Timelines to make this cleaner. I have to say that this help forum is the most responsive, educational and problem-solving forum I've seen for a long time - kudos to GreenSock and to the senior members here. Special thanks to you, Jack! I'm just getting started with GreenSock, but what a carefully engineered, performant and downright beautiful product!

Understood - by way of explanation, this is a d3.js collapsible tree, which of course significantly complicates things. It's not feasible to try to construct a minimal example because all the present code is needed in order to get the collapsible functionality. I did not think it would be fair to dump that on you. So that's why I have instead tried to pose questions and limit the scope of what I'm asking help on. I know that hampers things. I'm doing more experimentation, and it seems that reusing the same Timeline isn't working as expected. Using the .killTweensOf() method to remove the animations on elements that are deleted, then doing a .to(".class", ...) to get animations going again for elements that have been added, results in a Timeline that animates the undisturbed elements first, then the newly-added elements afterward, rather than all simultaneously. And each time I collapse-then-expand the tree, the time lag between the two groups gets longer. It's as if the Timeline is getting expanded via 'dead time' segments being inserted between the tweens for the groups of elements. Nothing I have tried resolves the issue. I am tempted to not reuse the same Timeline, but instead create an new one to hold the tweens each time the user collapses/expands some part of the tree. But I'm not quite sure how to implement that w/o making a garbage collection nightmare. I will keep at it to see if I can make any progress and report back. Any suggestions, no matter how oblique (due to the limited information on your side) would be appreciated. Thanks!

I tried the suggestions made but I could not get them to work properly. I think that's due to the very fluid nature of the DOM in this scenario. However, I sort of have this working fairly well by using two separate Timelines - one for the class of elements that have not been dynamically removed/re-added, and another Timeline for those that have been. Whenever I remove an element, and then it gets re-added, I give it a class different from what the static elements have, and animate these new elements with the 2nd Timeline. This works pretty well except for one issue. It looks like my two Timelines are not running simultaneously, but rather sequentially with respect to each other. The animations in the first Timeline will run, then those in the second Timeline run, instead of both groups of animations running at the same time. The longer the duration I set for each Timeline, the more noticeable this issue is, of course. I have them defined separately, like this: <script> var tl = gsap.timeline({repeat: 0}); tl.eventCallback("onComplete", triaRefresh); var tl2 = gsap.timeline({repeat: 0}); tl2.eventCallback("onComplete", trianewRefresh); </script> And in my two separate onComplete callbacks I simply do tl.restart() and tl2.restart() respectively so that the animations appear to run continuously for each group of elements. I start each Timeline like this, for example: gsap.set(".tria", {transformOrigin: "50% 65%", scale: 0.9}); tl.to(".tria", {duration: .5, rotation: 360, ease: "bounce"}); So except for the issue I mentioned above where the two Timelines seem to run sequentially to each other rather than simultaneously with each other, this is working. I don't know if there's a better, cleaner way to do this - perhaps nested Timelines? I'm a newbie to gsap so I'm still feeling my way thru this.

I have a Timeline working fine on a hierarchical tree (DOM document) in which selected classes of SVG elements are animated. However, the tree is collapsible, and when a node is collapsed, the element that is animated in that node is removed from the DOM. That's Ok, no problem. But when that node is expanded again via a mouse click on its parent, the element gets added again to the DOM, but the Timeline does not, of course, act upon the newly-created element to animate it. Is there a way to make the Timeline aware of elements that are dynamically created and whose class does fit the Timeline target parameter? I am hoping that I won't need to actually create a new Timeline to animate these dynamically created elements - for then I would have multiple Timelines targeting the same class of elements, and that seems problematic to me. I have tried a number of things to solve the issue, but to no avail. I either get what appears to be multiple instances of the Timeline colliding with each other, or else new elements animating as desired while existing elements (that have not been disturbed) not animating at all after some other node has been dynamically created.