React and GSAP animations with fetched data from a JSON file

[tunji.akanbi]

Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js

Edited May 6, 2021 by tunji.akanbi
used codesandbox instead of codepen

[OSUblake]

Hey @tunji.akanbi

 

Can I ask why you are using React? I'm trying to understand our React users better and how to improve the experience.

 

So let's break down some issues with your code...

 

Not a big one, but async is meant to be used with await. Using .then() is basically an alternate way to do async/await. It really doesn't matter which method you use as the end result will be the same.

 

useEffect(() => {
  (async () => {
    const response = await fetch("data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    });
    const data = await response.json();
    setMusic(data);
  })();
}, []);

 

9 hours ago, tunji.akanbi said:

From everything I was able to find online, it seems I need to use useRef() with GSAP

 

Yes, GSAP needs a reference to your element(s), and in React Hooks useRef() is usually the best way. However, one problem with your refs is that you are using the same useRef for each element.

 

ref={(el) => { testE = el; }}

 

<div key={m.id} className="m_Artist">
  ...
  <div className="artists">
    <h4
        ref={(el) => {
      testE = el;
      }}
      className="artists"
      >
      Artist Bio:
    </h4>
    {m.bio}
  </div>
</div>

 

The very last artist <h4> element is going to be the value of testE. A ref needs to be unique. Just like you can't have the same id in html. The HTML below "might" work, but can lead to problems because the IDs are the same.

 

<div id="artist">Foo</div>
<div id="artist">Bar</div>
<div id="artist">Baz</div>

 

This is essentially what your code is doing....

 

var testE = null

testE = element1;
testE = element2;
testE = element3;
testE = element4;

console.log(testE); // element4

 

So even if you had a unique ref for each element, you have another problem, those elements aren't going to be in the DOM until the music data has loaded.

 

{music.map((m) => (...))}

 

So you need another useEffect to wait for the data to come in.

 

useEffect(() => {
  // the artists are in the DOM
  // let's get animating!!!
}, [music]);

 

We are having a discussion over here about how to simplify the ref process...

 

 

But until then, this is what I would do...

https://codesandbox.io/s/musicapp-with-react-and-gsap-forked-csqtx?file=/src/Test.js

 

 

cc @GreenSock ref problems

 

[tunji.akanbi]

@OSUblake, Thanks a bunch, I'll follow your suggestions and refactor the code. I'm learning react for work/professional development reasons, it seems to be prevalent in the front end dev world.

Edited May 7, 2021 by tunji.akanbi
answering a question