Lozen

Thing is I'm trying to get back to React since it's a lot more easy to find a job ^^" I've worked on Vue only a year when it was all new, I guess vue has changed a lot ; too bad for me cause vue has a great doc (and in my language) when React has a lot of contribution but all in english ^^"

Hi, Thanks for the advices! This is not my first react project, I used to do a lot of app and website on it but yes it's my first react project since more than 3 years : I did a lot of php since 3 years and it's a lot more complicated to come back to react than I though. I didn't used gsap since... 2018 so yes I feel like I'm new to gsap ?

Hi Jack, Thank tou for your answer. I've just notice that I've made the old code on sandbox, sorry for this Here is the actual one I'm working on, it's better but not perfect since I see a lot of differences with what you did let screen = useRef(null); let body = useRef(null); useLayoutEffect(() => { var tl = gsap.timeline(); tl.to(screen, { duration: 1.2, width: "100%", left: "0%", ease: "power3.inOut", }); tl.to(screen, { duration: 1, left: "100%", ease: "power3.inOut", }); tl.set(screen, { left: "-100%", }); gsap .to(body, { duration: 0.3, opacity: "1", pointerEvents: "auto", ease: "power4.inOut", }) .delay(0); return () => { gsap.to(body, { duration: 1, opacity: "0", pointerEvents: "none", }); }; }, []); For gsap.context I didn't get what it was doing since "revert" means 3 different things in my language, I'll ask a friend who has a better english than mine. For the pointerEvents it's an old test I did, I though maybe I could get the event and make the page visible only after the animation in complete. I'm gonna try to fix all of this, many thanks

Hi Rodrigo, I couldn't find an answer for my issue, I did a demo in sandbox just here: sandbox demo I couldn't import the images but we can see that we're seeing my homepage before the animation is running

Hi Rodrigo, Thanks for your answer, I'm gonna try to make something with what you send Also, I did a video to illustrate my issue since I couldn't make a minimal demo with react and gsap ?

Hi there, I'm re discovering GSAP after 6 years, I'm trying to make an animation on a little website project, it's working great except that my page can be seen before the animation, I can't figure out why ? Any idea or help about it please ? Working with reactjs and vite js Here is my code: import { useRef, useEffect } from "react" import { Link } from "react-router-dom" import Champions from "../components/Champions" import { gsap, Power3, Power4 } from "gsap" import "../css/_frame.css" import "../css/_cards.css" const Home = props => { let screen = useRef(null); let body = useRef(null); useEffect(() => { var tl = new gsap.timeline(); tl.to(screen, { duration: 1.2, width: "100%", left: "0%", ease: Power3.easeInOut, }); tl.to(screen, { duration: 1, left: "100%", ease: Power3.easeInOut, }); tl.set(screen, { left: "-100%" }); gsap.to(body, {duration: 0.3}, { css: { opacity: "1", pointerEvents: "auto", ease: Power4.easeInOut } }).delay(0); return () => { gsap.to(body, {duration: 1}, { css: { opacity: "0", pointerEvents: 'none' } }); } }); return ( <> <div className="load-container"> <div className="load-screen" ref={(el) => (screen = el)}></div> </div> <div data-barba="container" className="home"> <div ref={(el) => (body = el)} className="Headd"> {Object.entries(props.originData).map((origin, key) => { return ( <div className="champions" key={key}> {Object.values(origin).map((champions) => { return Object.values(champions).map((champion, key) => { return ( champion.name && ( <Link to={"/" + origin[0] + "/" + champion.name} key={key}> <Champions champion={champion} /> </Link> ) ) }) })} </div> ) })} </div> </div> </> ) } export default Home What I get in the video. Many thanks to anyone who have read me gsap_issue.mp4