MouseEffect 07 - 이미지 오버 효과

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

         mouseImg.forEach((item) => {   //item = mouseimg
            const imageWrap = item.querySelector(".img")
            const imageWrapBounds = imageWrap.getBoundingClientRect();   //위치값을 가져옴
            let itemBounds = item.getBoundingClientRect();  //item의 위치값

            const onMouseEnter = () => {    //마우스가 영역에 들어왔을때
                gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale:0.3, opacity:0});   //set = 설정해주는거
                gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation: 0, scale:1, opacity:1})
            }

            const onMouseLever = () => {    //마우스가 영역을 떠났을때
                gsap.to(imageWrap, {xPercent: -50, yPercent: -100, rotation: 15, scale: 0.3, opacity:0})
            }

            const onMouseMove = ({x, y}) => {     //마우스 움직일때
                gsap.to(imageWrap, {
                    duration: 1.25,
                    x: Math.abs(x - itemBounds.left), //x 1000이면 itemBounds값이 500이됨 -,+되든 절대값으로 만들어줌
                    y: Math.abs(y - itemBounds.top),  
                })
            }

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