[Can't get GSAP to iterate multiple times over repeated elements with same class (motionpath)]

What I wanted is to iterate (or do a forEach loop) so I didn't have to have a new gsap animation for each individual race track (I have about 20 of them), but I wasn't able to get the animation working on all of them at once with the same class.

 

I just wanted one arrow on each track going around it.

 

The problem was when I was setting the path/align option in motionPath I couldn't get it to apply for all of them.

 

I eventually figured it out by setting the variable, by going up the tree to the div wrapper and inside the tree to the child for each.

race_track_parent = arrow.closest(".track_item").querySelector('.race_track_path');

 

 

I hope post helps somebody out!

[Can't get GSAP to iterate multiple times over repeated elements with same class (motionpath)]

Hi, I've been trying to iterate a race track with an arrow go along the path on the included codepen link.

 

Am I missing something here... I'm not very javascript savvy, but I've tried all the different iterations, looked through other forum posts and codepens, and I could not find something that works.

 

Any advice/help would be appreciated :)

See the Pen LYgGjMX by colinrei (@colinrei) on CodePen