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

[lkeabss]

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

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. It looks like you got the animation working nicely.

 

Can you please clarify what you mean by "iterate a racetrack"?

Do you want the animations for each track to play one after the other?

Do you want multiple arrows on each track?

 

Just try to be as descriptive as possible regarding the end result you are looking for. Thanks.

[lkeabss]

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!

[Rodrigo]

Hi,

 

Is looping through the tracks an option? That's the route I'd take:

const tracks = gsap.utils.toArray(".track_item");

tracks.forEach((track) => {
  const trackPath = track.querySelector(".race_track_path");
  const arrow = track.querySelector(".moving_arrow");
  gsap.to(arrow, {
    duration: 10,
    repeat: -1,
    ease:Linear.easeNone,
    motionPath:{
      path: trackPath,
      align: trackPath,
      autoRotate: 180,
      alignOrigin: [0.5, 0.5],
      start: 0,
      end: 1
    }
  });
});

 

Hopefully this helps.

Happy Tweening!