Animating a SVG Mind Map (Nested Timelines?)

[SkyFall]

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

[Cassie]

Hey, so you can achieve this with another loop within your current loop.

See the Pen LYvrxwd?editors=1010 by GreenSock (@GreenSock) on CodePen

If that's not the correct order, the easiest way to fix that is to change the order of the items within the SVG, but you could also use array methods in JS to swop the order around.

If you need to adjust the timing, you should look into the position parameter.

Hope this helps!

 

[SkyFall]

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?

Edited April 11 by SkyFall

[Cassie]

Quote

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?

I don't know what you've tried, sorry.

If you show me what you've done (fork the demo above with new code) then I can take a look.

[SkyFall]

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

[PointC]

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this.

 

See the Pen jORKGax by PointC (@PointC) on CodePen

 

The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs.

 

Happy tweening.

[SkyFall]

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

[SkyFall]

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

[Rodrigo]

Hi,

 

You can nest your loops and create some custom logic to know if there are child instances opened and if the last child instance should reverse the parent one, something like this:

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

 

I didn't had the time to go through everything in your setup so I came up with a simpler approach, but the logic is basically there and it should be re-usable without major issues.

 

Hopefully this helps.

Happy Tweening!