cursor custom circle gsap TweenMax

마우스 CURSOR GSAP를 이용한 circle custom

 

See the Pen mouse cursor circle - gsap TweenMax by jeunseon (@jeunseon) on CodePen.

 

 

gsap to 를 이용한 cursor circle 모습

 

HTML

<div class="cursor">
    <div class="cursor_ball cursor_ball_b">
      <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
      </svg>
    </div>
    <div class="cursor_ball cursor_ball_s">
      <svg height="10" width="10">
        <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
      </svg>
    </div>
</div>

 

CSS

/* cursor css 부분 */
body{
  background: #141212;
  cursor: none;
}
.cursor {
  pointer-events: none;
}
.cursor_ball {
  position: fixed;
  /*  fixed 로 했을 경우 다른 css에 영향을 받아 cursor가 제대로 안될 경우 absolute 로 해도 된다.*/
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 999;
}
.cursor_ball circle {
  fill: #f7f8fa;
}

 

GSAP JS

// cursor
const bigBall = document.querySelector('.cursor_ball_b');
const smallBall = document.querySelector('.cursor_ball_s');
// hover시 바뀌는 부분
const hoverables = document.querySelectorAll('.hoverable');

document.body.addEventListener('mousemove', onMouseMove);
for(let i = 0; i < hoverables.length; i++){
  hoverables[i].addEventListener('mouseenter', onMouseHover);
  hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move cursor
// gsap.to => TweenMax 로 하는 경우는 이전 버전이다.
function onMouseMove(e){
  gsap.to(bigBall, {
    duration: .4,
    x: e.pageX -15,
    y: e.pageY -15
  })
  gsap.to(smallBall, {
    duration: .1,
    x: e.pageX -5,
    y: e.pageY -7
  })
}

// Hover an element
function onMouseHover(){
  gsap.to(bigBall, {
    duration: .3,
    scale: 4
  })
  gsap.to(smallBall, {
    duration: .3,
    scale: 4
  })  
}

function onMouseHoverOut(){
  gsap.to(bigBall, {
    duration: .3,
    scale: 1
  })  
  gsap.to(smallBall, {
    duration: .3,
    scale: 1
  })
}