Изменение формы курсора при наведении на ссылку

Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.

Для демонстрации эффекта сверстана простенькая страничка. Но нас будет интересовать только кружок следующий за курсором мыши.

HTML

<div class="js-pointer pointer">
     <div class="pointer__circle"></div>
</div>

CSS

Стили кружка

.pointer {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 100;
  top: 50%;
  left: 50%;
  opacity: 0
}

.pointer .pointer__circle {
  position: absolute;
  top: 50%;
  transform: scale(1) translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 10px;
  height: 10px;
  background: #4FC3F7;
  border-radius: 50%;
  transition: all .5s cubic-bezier(.37, .01, 0, .98)
}

.pointer.hide .pointer__circle {
  transition: all .3s;
  opacity: .2;
  width: 60px;
  height: 60px
}

JS

В конце документа подключаем GSAP для плавной анимации и скрипт кружка:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="js/index.js"></script>

Скрипт, который отвечает за кружок.
Тут  вызываем функцию trackMouse() с двумя параметрами.
Первый параметр определяет класс, селектор элемента, при наведении на который кружок будет масштабироваться.
Второй параметр это селектор самого кружка.

window.onload = function(){
  trackMouse('.hoverable', '.js-pointer');
}

function trackMouse(hover, pointer) {

  var $hover = document.querySelectorAll(hover);
  var $pointer = document.querySelector(pointer);

  var off = 50;
  var first = !0;

  function mouseX(evt) {
    if (!evt) evt = window.event;
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return 0
  }

  function mouseY(evt) {
    if (!evt) evt = window.event;
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return 0
  }

  function follow(evt) {

    if (first) {
      first = !1;
      $pointer.style.opacity = 1;
    }

    TweenMax.to($pointer, .7, {
      left: (parseInt(mouseX(evt)) - off) + 'px',
      top: (parseInt(mouseY(evt)) - off) + 'px',
      ease: Power3.easeOut
    });
  }
  document.onmousemove = follow;

  (function hoverable(){
    $hover.forEach(function(item){
      item.addEventListener('mouseover', function(){
        $pointer.classList.add('hide');
      });
      item.addEventListener('mouseout', function(){
        $pointer.classList.remove('hide');
      });
    })
  })();

}