Interactive Nested Timelines

[Amnesicat]

Hi,

I'm trying to emulate something like this - I tried doing a forEach to dynamically capture all item elements, create fromTo tweens into separate child timelines and then add them to a main timeline to enable expand all items etc. (see codepen), but it's not working as intended. The item animations work fine on there own but when I add them to the main timeline they mess everything up. Can you control nested GSAP timelines individually like this, or is there a better way to do it?

 

Any guidance or examples on how to do this properly would be greatly appreciated.

 

Thanks a lot,

Alan

 

See the Pen gOQygvm by Amnesicat (@Amnesicat) on CodePen

[mvaneijgen]

Hi @Amnesicat I would just collect all the timelines in an array and then just play the timelines or reverse them. This is just a quick example, you could certainly build it to always reverse first if any timeline has already played. And check if all timelines are played then set the played value to true and then it will reverse them all, but I'll leave that to you. Hope it helps and happy tweening! 

 

See the Pen JjeVyXK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Carl]

wow, @mvaneijgen came in hot 🔥 with a super solution!

 

I was working slower on something very similar so I'll just share it also

 

See the Pen gOQyxMv?editors=0110 by snorkltv (@snorkltv) on CodePen

 

Also, there are times when you want to open one thing and close whatever other this currently open.

I have video lesson on this in my GSAP video training, but here's the demo if you want to study the technique.

 

See the Pen YzGpXWO by snorkltv (@snorkltv) on CodePen

 

[Amnesicat]

Hi, mvaneijgen and Carl,
These are two fantastic solutions, thank you so much for your quick responses. Carl, thanks for the other technique too, I'll definitely check that out as well as your videos.

Regards,

Alan