[Animating a SVG Mind Map (Nested Timelines?)]

I am currently finishing this project and came across another issue (hopefully it will be the last).

 

Some category items have clickable subcategories (I have marked them red in my CodePen).

So I have created another loop for each category-childrens and a second timeline with almost the same code. Now I want to revert the second timeline, if you click on the main category. Detailled explanation: 1.) click on the main category, 2.) click on a red category 3.) clicking on the main category should revert the first AND the second timeline.
Reading the docs, I have found the if (tl.reversed()) helper so I have added this into my code. The problem is that I am getting an error because of the second timeline being in an extra loop. But I think I need this additional loop because of the multiple sub-categories.

Is there a way of fixing this? Like for example a master timeline outside of both loops?

 

I hope you don't mind asking me this in this topic.

See the Pen PogaVVK by ItsBenedict (@ItsBenedict) on CodePen

[Animating a SVG Mind Map (Nested Timelines?)]

Perfect! I have never used "add" before, so you guys helped me a lot, thanks! 🙂

[Animating a SVG Mind Map (Nested Timelines?)]

This is my attempt. The minus values affect each tween within one timeline. But what I need is, that each timeline is starting before the previous timeline has ended. Maybe I have understood the position parameter wrong(?).

See the Pen oNOyeKr by ItsBenedict (@ItsBenedict) on CodePen

[Animating a SVG Mind Map (Nested Timelines?)]

Awesome, using another loop makes sense, thanks a lot!
Just one more thing: I've noticed that the animations look a bit choppy (especially the stroke animation). Tested both on Windows and a MacBook using Chrome and Firefox. I've tried different easings but that didn't help. Could this occur due to the fact using GSAP within a SVG?
edit: Looks like it is only on CodePen, on my localhost it's fine. 

I've also just tested the position parameter from your link. It's working nice for each item animation. But I have failed to achieve to start the whole animation of the second category item earlier. It is always waiting for the previous item. Do I need something else here?

[Animating a SVG Mind Map (Nested Timelines?)]

Hi there!

I am trying to animate a SVG mind map. The SVG contains a lot of layers and groups. I was trying to achieve an ordered structure using the same classes for multiple objects and by using a loop. I've simplified the graphic for you guys and created a CodePen below.

My issue now is that I don't know how to achieve this: I want to have a staggered animation of the category items but it should animate in this order: Cat Item 1 arrow animation, Cat Item 1 text animation, Cat Item 2 arrow animation, Cat Item 2 text animation, Cat Item 3 arrow animation, Cat Item 3 text animation, etc.
Do I need nested timelines for this? I'm not a developer so I think this is beyond my skills. Any help would be appreciated!

See the Pen poBKbMy by ItsBenedict (@ItsBenedict) on CodePen

[ScrollTrigger.batch child animations and each batch waiting for the previous one]

Correct, how can I add child animations using the second CodePen logic?

 

This is my attempt (I'm a beginner - at the moment nothing happens at all and it show several errors in the console but I don't know how to fix them):

 

See the Pen wvXdZwL by skyfalljs (@skyfalljs) on CodePen

[ScrollTrigger.batch child animations and each batch waiting for the previous one]

Hi there! 
I am using this pen from GreenSock as a reference for displaying blog posts:

 

See the Pen GRjWxaJ by GreenSock (@GreenSock) on CodePen

 

Now I am trying to modify the code so that if you scroll down the page, the batch animation from the new row will not start until the previous one is finished. Thanks to this forum I found a solution from ZachSaucier (pen below).

 

It looks like it is using a condition with if(tl && tl.isActive()). I am trying to combine these two codes for hours now but I am failing miserably due to my limited JS knowledge. Any help would be much appreciated.

See the Pen LYZvJJX by GreenSock (@GreenSock) on CodePen

[Elastic SVG Morph on Click and Swipe]

Nice work, thanks a lot! 🙂
I'm trying to make the last path occupying the whole screen but it is not working. I've removed the initial width of the SVG and added width: 100vw and height: 100vh  into the tl.to, here is my attempt:

See the Pen qBVyyRm by SkyFall1337 (@SkyFall1337) on CodePen

Do I need to modify the viewbox of the svg or where is my mistake?

[Elastic SVG Morph on Click and Swipe]

Hi there!
I've just discovered this tutorial and want to create something similar for my website.
I've never used GSAP so far, so my question is, if I can modify this code, so that the animation does start on a click trigger instead of page load. The element also needs to be swipeable, so I guess I am going to need GSAP Draggable and/or the Intertia Plugin additionally? Which GSAP Products do I need to achieve this? Thanks in advance! :)

See the Pen KLXdGL by designcourse (@designcourse) on CodePen