[Page transition: element is visible before animation]

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 ^^"

[Page transition: element is visible before animation]

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 😕

[Page transition: element is visible before animation]

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

[Page transition: element is visible before animation]

20 hours ago, Rodrigo said:

Hopefully this helps. If you keep having issues please fork one of those examples to create a minimal demo that illustrates the problems you're having.

Happy Tweening!

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

[Page transition: element is visible before animation]

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 😕

[Page transition: element is visible before animation]

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