<div class="cursor"></div>
html {
  background: #da4453; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #89216b,
    #da4453
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #89216b,
    #da4453
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  mix-blend-mode: exclusion;
  cursor: none;
}

.cursor {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -24px;
  border: 3px solid #f80759;
  border-radius: 100px;
  backface-visibility: hidden;
  transition: transform 0.3s ease-out;

  &.is-moving {
    transform: scale(0.7);
  }
}
View Compiled
// http://ahrengot.com/tutorials/greensock-javascript-animation

var $cursor = $('.cursor');

function moveCursor(e) {
  $cursor.addClass('is-moving');
  
	TweenLite.to($cursor, 0.23, {
    left: e.pageX,
    top: e.pageY,
    ease: Power4.easOut
  });
  
  clearTimeout(timer);

   var timer = setTimeout(function() {
       $cursor.removeClass('is-moving');
   }, 300);
}

$(window).on('mousemove', moveCursor);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js