Ene Adrian Posted January 3, 2023 Share Posted January 3, 2023 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> Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 3, 2023 Solution Share Posted January 3, 2023 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! 1 Link to comment Share on other sites More sharing options...
Ene Adrian Posted January 4, 2023 Author Share Posted January 4, 2023 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now