gsap animation not working after fetch function

[Sherlok 0 Likes (Newbie)]

Hello,

I try to implement the animation and when I have the text array in my component, the animation works well but after I got my data from API, the animation stopped working

The example is located here https://codesandbox.io/s/snowy-breeze-pk78hi?file=/src/components/Hero.js

If you replace the 

taglist.map(...)

into 

textArray.map(...)

you can see that it's started working.

Appreciate any help.

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

This is just how you should run your effect hooks in React when getting async data or doing async operations. You already have a your data in a hook so that's a good start. Just make your tag list a dependency in the layout effect and it works:

const { tagsList } = useFetchProducts();

useLayoutEffect(() => {
  if(tagsList.length === 0) return;
  let ctx = gsap.context(() => {
    gsap.set(".text", { xPercent: 50, autoAlpha: 0 });
    gsap.to(".text", {
      xPercent: 0,
      duration: 1,
      stagger: 0.2,
      autoAlpha: 1
    });
  }, HeroRef); // <- scopes all selector text to the root element

  return () => ctx.revert();
}, [tagsList]);

Hopefully this helps.

Happy Tweening!

[Sherlok 0 Likes (Newbie)]

Thanks @Rodrigo

it works