mouseeffect03 - 조명효과

const cursor = document.querySelector(".cursor");
// const circle1 = document.querySelector(".cursor").clientWidth;   //190 : border값이 빠진 상태
// const circle2 = document.querySelector(".cursor").offsetWidth;  //200 : border값 포함 상태
const circle3 = document.querySelector(".cursor").getBoundingClientRect();  //bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0

function follow(e){

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

    //출력용
    document.querySelector(".pageX").innerHTML = e.pageX;
    document.querySelector(".pageY").innerHTML = e.pageY;
}
window.addEventListener("mousemove", follow)