Start the same animation on the active parent element only.

[msnl]

I'm aware that this is more of a js issue but just linking buttons and cards made me feel so proud that i'd like to finish the whole thing (before going mad trying to implement the backend, but that's another story).

I can't find a way to start the timeline on the active card only, as it is the code iterates for all the blocks of text as all of my previous attemps have failed.

 

I've tried nesting a second loop for all the cards to link the increments of i, then an if else to check if classList.contains etc, but it seems to be way out of my current abilities.

 

Any hint is more than welcome. 

 

Thanks

See the Pen NWRRqPP by msnl (@msnl) on CodePen

[ZachSaucier]

Hey msnl. As my article about animating efficiently covers, you should try to create all of your animations beforehand and then use control methods on them as much as possible. You're also making a couple of the most common GSAP mistakes: namely chaining animations on completed timelines and using the old duration syntax. There's no reason why you should be adding the animations for different item to the same timeline in this situation. 

 

How about you give both of those articles a good, long read, redo your JS code from the ground up, and then if you have a specific question about GSAP ask here and we can help you out at that point?