Repeat GSAP 3 timeline for multiple elements

[olafvv]

Hi all,

 

I'm just starting out with GSAP and I'm trying to create a timeline for my landing page, with what it seems should be a nested timeline. 

 

In the codepen below you can see I try to animate a list. Each item has a before and after selector to create the circle and vertical line. What happens now is that it will fade in all the circles first, then the vertical line together with the text elements. The text elements have a stagger, so they will show up one by one. 

 

What I want is to animate the first circle first only, then the first vertical line, followed (or simultaneously) by the text elements of the first list item. When this is finished I want the same thing to happen to the second list item and so on.

 

I know that the current way of setting up my timeline is not the right way and feel like it should be a nested timeline somehow. Maybe even without those before and after selectors, which is fine. 

 

Does anyone have an idea how to do this? 

See the Pen ExZPjoe by olafvanv (@olafvanv) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Great job.

This can be handled a few ways, but since your are doing the same stuff to the same elements in each section, you can use a loop to build a timeline for each section and then put that timeline into a master timeline.

 

Here is an example

See the Pen JjEGGWJ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

hopefully its clear enough to understand what is happening

 

I would avoid the pseudo selectors because since you are animating a css rule, anything you do to that rule gets applied to all elements that have that class.

 

In case you're interested my course GSAP 3 Beyond the Basics covers a lot of advanced timeline techniques like these and more.

 

Carl

 

[olafvv]

Hi Carl,

 

Thank you! This will absolutely help me  
Didnt know gsap.utils.toArray was a thing, amazing.

 

I will try out your solution, without the pseudo selectors, and will definitely check out your course. 

 

Thanks again!

[Carl]

cool! btw you can find all the utility methods here: https://greensock.com/docs/v3/GSAP/UtilityMethods