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

${styles.sectionContainer} backgroundContainer

}
ref={sectionRef}
>
<div className={

${styles.casesContainer} container

${styles.casesContainer} container

}>
<div className={styles.ourProjects}>
<div>
<h1 className={

${styles.firstWord} firstWord

${styles.firstWord} firstWord

}>Proyectos</h1>
<h1 className={

${styles.secondWord} secondWord

${styles.secondWord} secondWord

}>exitosos</h1>
</div>

KP-C

Kevin Powell - Community•2y ago

vachito

animation scroll replace gsap

${styles.sectionContainer} backgroundContainer

${styles.sectionContainer} backgroundContainer

}
ref={sectionRef}
>
<div className={

${styles.casesContainer} container

${styles.casesContainer} container

}>
<div className={styles.ourProjects}>
<div>
<h1 className={

${styles.firstWord} firstWord

${styles.firstWord} firstWord

}>Proyectos</h1>
<h1 className={

${styles.secondWord} secondWord

${styles.secondWord} secondWord

}>exitosos</h1>
</div>

animation scroll replace gsap

Similar Threads

animation scroll replace gsap

Similar Threads

Similar Threads

Similar Threads