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>
