Targeting dom elements that are mapped

[Dylan Bozarth]

I am building an app that will generate a random amount of planets. What I am trying to do is create a simple orbit animation on these planets. 
The problem is I am getting an error of "Gsap target not found"
I am generating the planets in the following way 
 

const makePlanets = (num = 5) => {

    if (num > 0) {

      return (

        <div

          className={`planetWrap ${posList[Math.floor(Math.random() * 8 + 1)]}`}

        >

          <MiniPlanet

            name={`${makeid()}`}

            label={``}

            className={`${planetTypes[Math.floor(Math.random() * 56 + 1)]} 

          }`}

          >

            {" "}

          </MiniPlanet>

          {makePlanets(num - 1)}

        </div>

      );

    }

  };
And the animation is a simple rotate animation for now (also if anyone knows of a way for the animation to move in a circle but not rotate I would appreciate it.)

 function Orbit() {

    gsap.to(".a1", {

      rotation: -360,

      ease: "linear",

      repeat: Infinity,

      duration: 15,

    });
}

How can I get GSAP to target the elements properly? 
My full page of code is viewable here https://github.com/Imstupidpleasehelp/planetviewer/blob/main/src/systems/generatesystem.js

 

[OSUblake]

Hi Dylan!

 

The error is because those elements haven't been rendered yet.

 

You need to wait for it render.

useEffect(() => {
  if (planets) {
    EnterSystem();
  	Orbit();
  }
}, [planets]);

 

Also, I would recommend using the new scoped selector if you're going to be using class names.

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

See the Pen BaWOZpM by GreenSock (@GreenSock) on CodePen.

 

And GSAP has a random utility.

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

 

[Dylan Bozarth]

13 hours ago, OSUblake said:

Hi Dylan!

 

The error is because those elements haven't been rendered yet.

 

You need to wait for it render.

useEffect(() => {
  if (planets) {
    EnterSystem();
  	Orbit();
  }
}, [planets]);

 

Also, I would recommend using the new scoped selector if you're going to be using class names.

https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

 

 

 

 

And GSAP has a random utility.

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

 

Thanks for your response, I will study these links. I have a quick question about the useEffect hook however. 
I had experimented with using an if statement to get the functions to wait, however when I add anything to the dependency array it seems to run constantly instead of just once? 
I set up a code sandbox https://codesandbox.io/s/fervent-leavitt-1lhrr in case I'm not describing  it well 

[OSUblake]

56 minutes ago, Dylan Bozarth said:

I had experimented with using an if statement to get the functions to wait, however when I add anything to the dependency array it seems to run constantly instead of just once? 

 

You have a lot of code in there, but I'm assuming you're talking about this?

useEffect(() => {
  setPlanets(makePlanets(RandomNum()));
  if (planets) {
    EnterSystem();
    Orbit();
  }

}, [planets]);

 

That's essentially creating an infinite loop. You set the planets, and then that triggers a dependency change, call that useEffect again. Try putting the creation stuff inside it's own useEffect.

 

useEffect(() => {
  setPlanets(makePlanets(RandomNum()));
}, []);

useEffect(() => {
  
  if (planets) {
    EnterSystem();
    Orbit();
  }

}, [planets]);

 

[Dylan Bozarth]

49 minutes ago, OSUblake said:

 

You have a lot of code in there, but I'm assuming you're talking about this?

useEffect(() => {
  setPlanets(makePlanets(RandomNum()));
  if (planets) {
    EnterSystem();
    Orbit();
  }

}, [planets]);

 

That's essentially creating an infinite loop. You set the planets, and then that triggers a dependency change, call that useEffect again. Try putting the creation stuff inside it's own useEffect.

 

useEffect(() => {
  setPlanets(makePlanets(RandomNum()));
}, []);

useEffect(() => {
  
  if (planets) {
    EnterSystem();
    Orbit();
  }

}, [planets]);

 

Thank you! I had no idea you could use two useEffects.