Gsap timeline dynamic foreach

[marciineek]

Hi, I'm having trouble making a foreach loop in a timeline, the code I'm using is 1:1.
https://codepen.io/JamiKazmi/pen/VwbLZYV
In this example, the animation is hardcoded according to "[data-slide='1']", can anyone help me how can I get a more dynamic way as if someone added the next slide?

See the Pen VwbLZYV by JamiKazmi (@JamiKazmi) on CodePen

[mvaneijgen]

Hi @marciineek welcome to the forum! 

 

I've did some quick tweaks to your demo to show the concept, but it is not 100% correct. I think you would want to first slide to show by default and the last slide to stay when it's done, these tweens you have to write manually. You could target them with css like follows selector:not(:first-child) or give the elements in the middle a different class.  

 

See the Pen bGQEoLO?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Mainly what I wanted to show you was a tutorial our own @Carl did about how to set up these kinds of fancy staggers, he does a much better job then I can write out here explaining how these work. Keep in mind it is really smart to first write out the timeline like you did, that way you can see patterns emerge and it is much easier to convert it to something dynamic! Hope it helps and happy tweening!