GSAP tries to run before API data is returned despite dependency

[rdawg365]

I'm working on a React project and have a section that fetches data from an endpoint using a custom useFetchProjects hook and then renders the data in JSX. The data is fetched properly, but GSAP throws a bunch of "target not found" errors prior in the console that I'd like to get rid of. I think something about the async nature of the call prevents the DOM from fully loading before GSAP is called. I've tried passing in data as a dependency in the useGSAP hook (in the codepen I use useEffect, but they were both resulting in the same behavior), but it still runs and throws errors. Can anyone help explain why I'm seeing these errors?

 

I've attached a codepen link, but I can't get the React/Tailwind/GSAP stack to render properly. You'll still be able to see the set-up though.

 

 

See the Pen wvbyJEb by rdawg3000 (@rdawg3000) on CodePen

[ryan_labar]

The useEffect dependency doesn't stop the hook from running initially (it just re-runs it when "data" changes). What I'd suggest is something like:
 

useEffect(() => {
    if (!data.length) return;
    var featuredWorkTL = gsap.timeline();
	...
  }, [data]);

 

[Rodrigo]

Hi,

 

On top of Ryan's great advice, we strongly recommend using our useGSAP hook, since it's a replacement for useEffect/useLayoutEffect you can pass a dependencies array to it and run your logic inside of it.

 

You can learn more about it here:

https://gsap.com/resources/React

 

Finally we have  a collection of starter templates for using GSAP in React projects:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

Feel free to fork one of those in order to create a minimal demo if you have further questions.

 

Hopefully this helps

Happy Tweening!

[rdawg365]

Thanks @ryan_labar. if (!data) worked for me. I just thought the errors were weird because useEffect should happen after the DOM mounts, but i guess not after an async call. I also used useGSAP @Rodrigo, but still got the same console errors.

[Rodrigo]

Hi,

 

You can definitely use a useEffect with an empty dependencies array to make your API call and then update a state property and based  on that state run your useGSAP hook, something like this:

 

const [cards, setCards] = useState(null);

const fetchCardsData = useCallback(async()=> {
  const response = await fetch("http://example.com/cards.json");
  const cards = await response.json();
  setCards(cards);
}, [])

useLayoutEffect(() => {
  fetchCardsData();
}, []);

useGSAP(() => {
  if (!cards) return;
  // There are cards, create your GSAP instances
}, {
  dependencies: [cards],
});

Finally remember to create a working minimal demo that clearly illustrates the issue you're having.

 

Happy Tweening!