rzschoch

Hi, I just came up with a possible solution: http://codepen.io/rzschoch/pen/ezZJba?editors=0010 The only rather ugly way I found is to clone the origin element every time. Or is there a much more elegant way baked in GSAP? I chose this way because I need to have the original state of the SVG elements before starting a new parallel animation. If I don’t have this state the animation gets a yoyo effect (forward to backward). It would be great to find an elegant solution for my problem. Thanks René

Thanks for your help, again. It’s a good idea to communicate in code chunks. To go simplify it even further I try to explain the desired effect in a timeline visualization: o = placeholder visualizing an empty timeline x = added timeline with tween ^ = playhead 1. Main Timeline at start: ^oooooooooooooooooo 2. Main timeline gets the first animation and starts playing: ^xxxxxxxxxxxxooooooo 3. At some point during play another child timeline is added to the main one (at a different layer?): xxxxxx^xxxxoooooooo ^xxxxxxxxxxxxooooooo 4. Now two playheads are moving and a concurrent animation with different timeline positions in the same animation are shown xxxxxxxxx^xoooooooo xxx^xxxxxxxxxooooooo 5. A child timeline should remove itself after completion 6. Every child timeline creates a new one at some time, like shown in 3 So, if I understand you right, the difference between your and my version is that yours is a sequence of successive timelines and my intended version is a sequence of parallel playing timelines. At the end, I try to have dynamically generated parallel timelines with an offset to each other. These sequences should create itself infinite until said otherwise. Thanks a lot René

Thanks Carl, you are right, my CodePen lacks any good explanation and is not easy to understand. Sorry about that. I just created a new, much more shortened one, available here: http://codepen.io/rzschoch/pen/RRrmBB?editors=1010 What I want to achieve is a morphing animation between keyframes that are defined in an SVG. For this testcase I simplified the available keyframes to only 3. Later on there will be at least 3 variants for each keyframe. The desired effect is a new morphing animation from the beginning, while the old is not yet completed. This effect should repeat with changing keyframes while a specific condition is fulfilled. I hope to achieve a nearly randomized morphing effect when there are enough keyframes available in the SVG. A description of my intended sequence as seen in the CodePen: a new timeline including a morphing tween between keyframes (SVG elements) is added at position 0 in the main timeline (line 29) the main timeline starts playing (line 37) the new child timeline triggers the creation of another new timeline at a specific time (line 16), starting at the current playhead time (line 25) of the main timeline a completed timeline on the main timeline should be removed, as it is not needed anymore (line 10) / Here I have no idea what the best way would be? And here are my questions: Does my approach make sense? Why are the new child timelines not visible and playing like the first one? How can I remove a completed child timeline? Makes more sense now? Thanks a lot for your time and patience.

Hi, during my first project with GSAP I struggle trying to have tweens dynamically added to a main timeline. There’s a main timeline that gets a new randomized morphing animation based on SVG shapes. After the first keyframe in this child timeline I want to start a new concurrent animation on the main timeline. Unfortunately, the new animations aren’t visible. Also, I don’t know how to remove the completed child animations (kill, clear, remove?), as they are not needed anymore. Is this even a good way to do it? Simplified CodePen: http://codepen.io/rzschoch/pen/RRrmBB?editors=0010 Original CodePen: http://codepen.io/rzschoch/pen/jrWJNW?editors=1010 Thanks for helping out René