I'm a beginner with GSAP and following a tutorial in a video, so i already got what I wanted, the issue is when I click my hamburger menu the layer or the object that was used together with GSAP is always on top with other elements, even a simple box can go over to the top without any z-index manipulation, idk please help me..
as you can see to opened hamburger menu, its still showing up even i dont intend to.
Unopened hamburger menu:
Opened hamburger menu:
code:
import LogoImage from "../../common/Logo";
import DisplayPicture from "../../../assets/profile_in_pofolio-1.jpg";
import { useRef } from "react";
import "../main.scss";
const About = () => {
const overlay = document.querySelector(".overlay");
window.addEventListener("mousemove", (e) => {
const { clientX, clientY } = e;
const x = Math.round((clientX / window.innerWidth) * 100);
const y = Math.round((clientY / window.innerHeight) * 100);
gsap.to(overlay, {
"--x": `${x}%`,
"--y": `${y}%`,
duration: 0.3,
ease: "sine.out",
});
});
// span.addEventListener("click", () => {
// overlay.classList.toggle("is-open");
// });
return (
<>
<div className="bg-c_Black w-screen h-screen flex items-center justify-center">
<div className=" px-6 font-poppins bg-c_Black">
<div className="md:flex justify-center items-center">
<div className="text-center font-medium text-4xl md:text-6xl text-c_Orange flex flex-col space-y-6">
<span>
The most <span className="">Knowledgeable Experience </span>is
the <br className="sm:hidden" />
<span className="text-c_Orange">Experience</span> that has
<span className="text-c_Orange"> Failure</span>.
</span>
<span>
Not the <span className="text-c_Orange">Experience</span> full
of <span className="text-c_Orange">Perfection</span>
<br className="sm:hidden" /> and Immediate{" "}
<br className="sm:hidden" />
<span className="">Success</span>.
</span>
</div>
</div>
</div>
<div className="overlay px-96 font-poppins bg-c_Orange absolute z-0">
<div className="md:flex justify-center items-center">
<div className="text-center font-bold text-4xl text-c_Black md:text-8xl flex flex-col space-y-6">
<div className="text-center font-medium text-4xl md:text-6xl flex flex-col space-y-6">
<span>
The most <span className="">Knowledgeable Experience </span>is
the <br className="sm:hidden" />
<span className="text-c_White">Experience</span> that has
<span className="text-c_White"> Failure</span>.
</span>
<span>
Not the <span className="text-c_White">Experience</span> full
of <span className="text-c_White">Perfection</span>
<br className="sm:hidden" /> and Immediate{" "}
<br className="sm:hidden" />
<span className="">Success</span>.
</span>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default About;
