Jump to content
Search Community

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

lkeabss test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites



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,
      path: trackPath,
      align: trackPath,
      autoRotate: 180,
      alignOrigin: [0.5, 0.5],
      start: 0,
      end: 1


Hopefully this helps.

Happy Tweening!

  • 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.
  • Create New...