Ene Adrian
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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) => (<spankey={random(6)}className="overflow-hidden flex flex-col pb-4 "><span ref={(el) => (line1 = el)} className="hero-titlu">{word}</span></span>))}</div>
Gsap + react key problem
in GSAP
Posted
It seems that is working right now. Thanks