animation scroll replace gsap
I need to know how to replace this done with gsap to native css, using animation scroll, who can help me?
useGSAP(
() => {
gsap.to(".firstWord", {
x: "0",
scrollTrigger: {
trigger: ".firstWord",
start: "=-300% 50%",
end: "=200% 50%",
scrub: 2,
},
backgroundPosition: "100% 100%",
});
gsap.to(".secondWord", {
x: "0",
scrollTrigger: {
trigger: ".firstWord",
start: "=-300% 50%",
end: "=200% 50%",
scrub: 2,
},
});
},
{ scope: sectionRef }
);
return (
<section
className={
${styles.sectionContainer} backgroundContainer}
ref={sectionRef}
>
<div className={${styles.casesContainer} container}>
<div className={styles.ourProjects}>
<div>
<h1 className={${styles.firstWord} firstWord}>Proyectos</h1>
<h1 className={${styles.secondWord} secondWord}>exitosos</h1>
</div>0 Replies