Looping Over Lists with GSAP

[support@risevision.com 2 Likes (Newbie)]

I have several unordered lists in my html. I would like to cycle or iterate over them with gsap one by one while staggering in their 8 individual list items.

For example stagger in 1-8 wait 3 seconds, fade out and stagger in 9-16, repeat.

I could easily target each list individually but I need to use a loop in the event I have more than 2 lists.

 

I am selecting all lists by class then looping over each element.

However when I do this it animates in the second list directly after the first one. I've tried playing with delays and repeat delays with no luck.

Anyone have an idea of what Im doing wrong here?

I imagine Its because Im selecting .list li which is targeting both lists at once. However Im not sure how to target them one by one.

Thanks in Advance!

See the Pen ZEjoWqy by mmeiers-the-decoder (@mmeiers-the-decoder) on CodePen

[alig01 81 Likes (Contributor)]

Hey,

 

your guess is correct, the error is in .list li. 

In your forEach loop, you iterate over your lists. So the element is your current list, which means you can target its children.

I tried this in a pen, however I was unfortunately unfamiliar with the old syntax, so I rewrote it a bit (probably missed something). You could find the guide here.

 

See the Pen yLqjJWR?editors=0010 by alig01 (@alig01) on CodePen

 

Hope this helps.

 

 

[support@risevision.com 2 Likes (Newbie)]

Awesome thank you I really appreciate it! I in fact tried to use element, but I believe I had the stagger on the child elements incorrect at the time. 

I guess I'm unfamiliar with the new syntax Ill have to brush up.

Thanks Again!