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