zjebinsky

Thank you so much for such a fast and friendly response! I did not realize that context is such an important thing when using GSAP with React! I havent seen the post about it earlier. I'll dive deep into that now. Here is the updated code that works just like i wanted to (for anyone that encounters the same issue!) import {gsap} from "gsap"; import {ScrollTrigger} from "gsap/all"; import {useEffect, useRef} from "react"; //import {Link} from "react-router-dom"; //import {cursorEnterAnimation, cursorLeaveAnimation} from "../../utils/animations"; import {SplitText} from "gsap/all"; gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(SplitText); const Work = () => { let component = useRef(null); useEffect(() => { let ctx = gsap.context(() => { gsap.to("#text-container", { scrollTrigger: { trigger: "#project-container", start: "top 40%", end: "bottom 40%", pin: "#text-container", pinSpacing: false, markers: true, }, }); }, component); return () => ctx.revert(); }, []); return ( <div ref={component} className="flex w-full flex-col items-center justify-between text-white"> <div id="project-container" className="relative flex h-[170vh] items-center justify-center"> <div className="mr-[20vw] h-[60vh] w-[600px] bg-red-400"></div> <div id="text-container" className="absolute top-0 flex flex-col items-center justify-center text-primary" > <h1 className="text-center text-8xl font-bold">TITLE</h1> <h2 className="mt-5 text-center font-grandslang text-xl font-medium"> Project & Development </h2> <button className="mt-12 text-center font-medium tracking-widest underline"> VIEW PROJECT </button> </div> </div> <div className="flex h-[170vh] items-center justify-center"> <div className="mr-[20vw] h-[60vh] w-[600px] bg-red-400"></div> </div> </div> ); }; export default Work;

Hey Folks, I'm a relatively new GSAP user and Club Greensock member and I've encountered on issue with the scrolltrigger plugin. I tried to recreated the problem in the stackblitz with react provided by some1 from GSAP team in a different thread i read (i hope it's not an issue since I'm mainly a react developer). https://stackblitz.com/edit/react-ynqg27?file=src/App.js I also made a quick video of the issue in on my dev server to make sure i explain the issue as much as i can (don't mind the birds in the background :D) - And also here is my component code import {gsap} from "gsap"; import {ScrollTrigger} from "gsap/all"; import {useEffect} from "react"; import {Link} from "react-router-dom"; import {cursorEnterAnimation, cursorLeaveAnimation} from "../../utils/animations"; import {SplitText} from "gsap/all"; const Work = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(SplitText); ScrollTrigger.create({ trigger: "#project-container", start: "top 40%", end: "bottom 40%", scrub: 1, markers: true, pin: "#text-container", }); }, []); return ( <div className="flex w-full flex-col items-center justify-between text-white"> <div id="project-container" className="relative flex h-[170vh] items-center justify-center"> <div className="mr-[20vw] h-[60vh] w-[600px] bg-red-400"></div> <div id="text-container" className="absolute top-0 flex flex-col items-center justify-center text-primary" > <h1 className="text-center text-8xl font-bold">TITLE</h1> <h2 className="mt-5 text-center font-grandslang text-xl font-medium"> Project & Development </h2> <button className="mt-12 text-center font-medium tracking-widest underline"> VIEW PROJECT </button> </div> </div> <div className="flex h-[170vh] items-center justify-center"> <div className="mr-[20vw] h-[60vh] w-[600px] bg-red-400"></div> </div> </div> ); }; export default Work; It seem's like the title dissapears when the starter markers meet and appears back after end markers meet at the end of the page. Then it appears in the center again on the way back and stays there untill the start markers again. Can you please tell me what I'm missing?