Hello, I have a problem with component positioning: whenever hover is active, the images are displayed at the top of the page, not in the component area. How to deal with this? Should property "top", "left" be applied to a specific div with specific units?
const scaleAnimation = {
initial: { scale: 0, x: "-50%", y: "-50%" },
enter: {
scale: 1,
x: "-50%",
y: "-50%",
transition: { duration: 0.4, ease: [0.76, 0, 0.24, 1] },
},
closed: {
scale: 0,
x: "-50%",
y: "-50%",
transition: { duration: 0.4, ease: [0.32, 0, 0.67, 0] },
},
};
const Modal = ({ modal, portfolioLinks }) => {
const { active, index } = modal;
const container = useRef(null);
useEffect(() => {
const moveContainerX = gsap.quickTo(container.current, "left", {
duration: 0.8,
ease: "power3",
});
const moveContainerY = gsap.quickTo(container.current, "top", {
duration: 0.8,
ease: "power3",
});
window.addEventListener("mousemove", (e) => {
const { clientX, clientY } = e;
moveContainerX(clientX);
moveContainerY(clientY);
});
});
return (
<motion.div
ref={container}
variants={scaleAnimation}
initial={"initial"}
animate={active ? "enter" : "closed"}
className="modalContainer"
>
<div style={{ top: index * -100 + "%" }} className="modalSlider">
{portfolioLinks.map((project, index) => {
const { src, color } = project;
return (
<div
key={index}
style={{ backgroundColor: color }}
className="modal"
>
<img
src={src}
width={300}
height={0}
alt="image"
className="modalImg"
></img>
</div>
);
})}
</div>
</motion.div>
);
};
export default Modal;