mateosalinasm

Hi, thank you for your response. Unfortunately, this didn't fix my issue. It actually made the first animation flicker a little bit. The text is still not moving on any axis, it only appears. I think I implemented your suggestion correctly, please let me know if I missed something. import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import "./home.css"; import About from "../components/About"; import Skills from "../components/Skills"; const Home = () => { useLayoutEffect(() => { let ctx = gsap.context(() => { const tl = gsap.timeline(); tl.fromTo(".name", { opacity: 0 }, { opacity: 1, duration: 2 }) .fromTo( ".where, .creativity, .meets", { opacity: 0, x: "-10%" }, { opacity: 1, x: "0%", stagger: 0.5 } ) .fromTo( ".where, .creativity, .meets", { x: "-100%" }, { x: "0%", duration: 1, ease: "power1.out" } ) }); return () => ctx.revert(); }, []); return ( <div> <section id="home" className="h-screen mb-10"> <div id="hero-text" className="flex-col flex justify-center -mt-24 h-screen" > <div className="text-mute-beige tracking-tighter font-bold text-5xl justify-center flex flex-col items-center px-24 -z-10"> <div className=""> <h1 className="relative text-sm font-extralight tracking-widest mb-2 name"> MATEO SALINAS </h1> <div> <h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left where"> WHERE </h1> <div> <h1 className="text-amber-500 max-w-2xl font-extrabold text-8xl leading-24 text-left creativity"> CREATIVITY </h1> </div> <h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left meets"> MEETS CODE </h1> </div> </div> </div> </div> </section> <section id="about"> <About /> </section> <section id="skills"> <Skills /> </section> <section id="projects"></section> <section id="contact"></section> </div> ); }; export default Home; import { React, useEffect, useLayoutEffect } from "react"; import { gsap } from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import "./about.css"; const About = () => { useLayoutEffect(() => { let ctx = gsap.context(() => { const text = document.querySelector(".text-to-animate"); const words = text.textContent.split(" "); text.textContent = ""; words.forEach((word) => { const wordSpan = document.createElement("span"); wordSpan.className = word === "frontend" || word === "developer" ? "colored-word" : ""; const letters = word.split(""); letters.forEach((letter) => { const letterSpan = document.createElement("span"); letterSpan.textContent = letter; wordSpan.appendChild(letterSpan); }); wordSpan.innerHTML += " "; // add back the space after the word text.appendChild(wordSpan); }); const tl = gsap.timeline({ scrollTrigger: { trigger: ".text-to-animate", start: "top 80%", end: "bottom 40%", scrub: true, // markers: true, }, }); // Animate text opacity change gsap.utils.toArray(".text-to-animate span span").forEach((letter, i) => { tl.fromTo( letter, { opacity: 0.2, duration: 0.4, }, { opacity: 1, duration: 0.4, ease: "none", }, i * 0.1 ); }); }); return () => ctx.revert(); }, []); return ( <div> <div className="text-mute-beige tracking-tighter font-bold text-5xl ml-20 h-screen flex content-around flex-col px-24 justify-center items-center"> <div className="flex flex-col justify-start max-w-6xl"> <p id="about" className="relative text-sm font-extralight tracking-widest mb-2" > ABOUT ME </p> <div className="font-extrabold text-5xl max-w-6xl leading-16 text-left mb-10 text-to-animate"> <h1>I'm a passionate </h1> <h1 className="text-amber-500">frontend developer</h1> <h1> {" "} dedicated to crafting visually captivating applications that not only provide effective solutions but also spark joy and inspiration. </h1> </div> </div> </div> </div> ); }; export default About;

The animation that I have in my About component changes the opacity of the text as you scroll down the page, but since I added it to my Home page its breaking the animation I have set up. Its supposed to move the text from x: '-10%' to x:0 but its not working. It only appears staggered because I set the opacity from 0 to 1, but the movement part of it is broken. These are both components: import React, { useState, useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import "./home.css"; import About from "../components/About"; import Skills from "../components/Skills"; const Home = () => { useEffect(() => { const tl = gsap.timeline(); tl.fromTo(".name", { opacity: 0 }, { opacity: 1, duration: 2 }) .fromTo( ".where, .creativity, .meets", { opacity: 0, x: "-10%" }, { opacity: 1, x: "0%", stagger: 0.5 } ) .fromTo( ".where, .creativity, .meets", { x: "-100%" }, { x: "0%", duration: 1, ease: "power1.out" } ) }, []); return ( <div> <section id="home" className="h-screen mb-10"> <div id="hero-text" className="flex-col flex justify-center -mt-24 h-screen" > <div className="text-mute-beige tracking-tighter font-bold text-5xl justify-center flex flex-col items-center px-24 -z-10"> <div className=""> <h1 className="relative text-sm font-extralight tracking-widest mb-2 name"> MATEO SALINAS </h1> <div> <h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left where"> WHERE </h1> <div> <h1 className="text-amber-500 max-w-2xl font-extrabold text-8xl leading-24 text-left creativity"> CREATIVITY </h1> </div> <h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left meets"> MEETS CODE </h1> </div> </div> </div> </div> </section> <section id="about"> <About /> </section> <section id="skills"> <Skills /> </section> <section id="projects"></section> <section id="contact"></section> </div> ); }; export default Home; import { React, useEffect } from "react"; import { gsap } from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import "./about.css"; const About = () => { useEffect(() => { const text = document.querySelector(".text-to-animate"); const words = text.textContent.split(" "); text.textContent = ""; words.forEach((word) => { const wordSpan = document.createElement("span"); wordSpan.className = word === "frontend" || word === "developer" ? "colored-word" : ""; const letters = word.split(""); letters.forEach((letter) => { const letterSpan = document.createElement("span"); letterSpan.textContent = letter; wordSpan.appendChild(letterSpan); }); wordSpan.innerHTML += " "; // add back the space after the word text.appendChild(wordSpan); }); const tl = gsap.timeline({ scrollTrigger: { trigger: ".text-to-animate", start: "top 80%", end: "bottom 40%", scrub: true, // markers: true, }, }); // Animate text opacity change gsap.utils.toArray(".text-to-animate span span").forEach((letter, i) => { tl.fromTo( letter, { opacity: 0.2, duration: 0.4, }, { opacity: 1, duration: 0.4, ease: "none", }, i * 0.1 ); }); }, []); return ( <div> <div className="text-mute-beige tracking-tighter font-bold text-5xl ml-20 h-screen flex content-around flex-col px-24 justify-center items-center"> <div className="flex flex-col justify-start max-w-6xl"> <p id="about" className="relative text-sm font-extralight tracking-widest mb-2" > ABOUT ME </p> <div className="font-extrabold text-5xl max-w-6xl leading-16 text-left mb-10 text-to-animate"> <h1>I'm a passionate </h1> <h1 className="text-amber-500">frontend developer</h1> <h1> {" "} dedicated to crafting visually captivating applications that not only provide effective solutions but also spark joy and inspiration. </h1> </div> </div> </div> </div> ); }; export default About;