Mouse Effect03 - 조명효과

function follow(e){
    // const circle = document.querySelector(".cursor").clientWidth; //190: border 값 빠진 상태
    // const circle = document.querySelector(".cursor").offsetWidth; //200: border 값 포함 상태
    const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y

    // console.log(circle);
    // console.log(circle.width);

    gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2});

    //출력용
    document.querySelector(".pageX").innerText = e.pageX;
    document.querySelector(".pageY").innerText = e.pageY;
}

window.addEventListener("mousemove", follow);

• getBoundingClientRect
• pageX
• pageY
• gsap