Gsap + react key problem

[Ene Adrian]

Hello guys, i have a small (but it's big) problem. Sometimes when i'm reloading the page the transform: translateX is stuck or it only goes from 50px to 49.(...)px and the text is out of view. I've seen if i'm "generating" a new key (i mean, if i set the key as "123" and save it works, and then if i set as "1234" it works again, not if i leave it as "1234" is not working) so i've installed a package to generate random keys, i thought might it work, but no, now the animation isn't working at all. What should be the problem?

 

  let line1 = useRef(null);

  useEffect(() => {

    gsap.from(".hero-titlu", {

      duration: 0.8,

      delay: 0.8,

      ease: "power4.out",

      y: 50,

      stagger: {

        amount: 1,

      },

    });

  }, [line1]);

  return (

    <AnimatePresence>

      <div class="w-screen pt-44 font-poppins flex flex-col lg:justify-start ">

        <div className="custom-padding flex justify-between">

          <div class="flex-col flex text-6xl xl:text-8xl text-black dark:text-white">

            {props.title.split(" ").map((word, idx) => (

              <span

                key={random(6)}

                className="overflow-hidden flex flex-col pb-4 "

              >

                <span ref={(el) => (line1 = el)} className="hero-titlu">

                  {word}

                </span>

              </span>

            ))}

          </div>

[Rodrigo]

Hi @Ene Adrian and welcome to the GreenSock forums!

 

Is really hard to troubleshoot without a minimal demo. If you want you can fork this one and adapt it to look like your setup:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

The only thing I can see is that maybe you're having issues with React's strict mode that calls use effect twice which can be specially annoying with from() instances:

For that we recommend using GSAP Context in your React Apps and in every React based library (Gatsby, NextJS, etc.):

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[Ene Adrian]

12 hours ago, Rodrigo said:

Hi @Ene Adrian and welcome to the GreenSock forums!

 

Is really hard to troubleshoot without a minimal demo. If you want you can fork this one and adapt it to look like your setup:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

The only thing I can see is that maybe you're having issues with React's strict mode that calls use effect twice which can be specially annoying with from() instances:

For that we recommend using GSAP Context in your React Apps and in every React based library (Gatsby, NextJS, etc.):

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

It seems that is working right now. Thanks