Jump to content


gsap animation not working after fetch function

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts


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 




you can see that it's started working.

Appreciate any help.

Link to comment
Share on other sites

  • Solution



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!

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.