Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tunji.akanbi

React and GSAP animations with fetched data from a JSON file

Recommended Posts

Posted (edited)

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 by tunji.akanbi
used codesandbox instead of codepen
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

Posted (edited)

@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 by tunji.akanbi
answering a question
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.

×