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={
ref={sectionRef}
>
<div className={
<div className={styles.ourProjects}>
<div>
<h1 className={
<h1 className={
</div>
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>
