07.마우스 이펙트 - 이미지 오버 효과

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

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

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

            }

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

            const onMouseMove = ({x,y}) => {
                gsap.to(imgageWrap, {
                    duraion: 1.25,
                    x: Math.abs(x-itemBounds.left),
                    y: Math.abs(y-itemBounds.top)
                });
            }

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