Mouse Effect - 텍스트 효과

        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});//gsap를 잘 활용하면 react할때 편함
            };

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

            };

            const monMouseMove = ({x, y}) => {
                gsap.to(imageWrap, {
                    duration: 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", monMouseMove);
        });

 

마우스 텍스트 효과 사이트