Jump to content


Looping Over Lists with GSAP

Recommended Posts

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

Link to comment
Share on other sites



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.



  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.