Mouse Effect07 - 이미지 오버

const mouseImg = document.querySelectorAll(".mouse__img")

mouseImg.forEach((item) => {
    const imageWrap = item.querySelector(".img");
    const imageWrapBounds = imageWrap.getBoundingClientRect();
    let itemBounds = item.getBoundingClientRect();

    const onMouseEnter = () => {
        gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0})
        gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation: 0, scale: 1, opacity: 1})
    };

    const onMouseLeave = () => {
        gsap.to(imageWrap, {xPercent: -50, yPercent: -100, rotation: 15, scale: 0.3, opacity: 0})
    };

    const onMouseMove = ({x, y}) => {
        gsap.to(imageWrap, {
            duration: 1.5,
            x: Math.abs(x - itemBounds.left), 
            y: Math.abs(y - itemBounds.top)
        })
    };

    item.addEventListener("mouseenter", onMouseEnter);
    item.addEventListener("mouseleave", onMouseLeave);
    item.addEventListener("mousemove", onMouseMove);
})​