<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8" async=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js" charset="utf-8" async=""></script>

<div class="homeloader"> 
  <div class="target" id="target"></div>
  <div class="cursor" id="cursor"></div>
</div>

<script src=""></script>

<style>
body {

  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
}

.homeloader {
  position: fixed;
  z-index: -1;
  top:0;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #121212;
  display: flex;
}

.target {
  position:absolute;
  right:0;
  width: 0px;
  height: 0px;
  background-color: transparent;
}

.cursor {
border-radius: 50%;
    width: 200px;
    filter: blur(40px);
    height: 200px;
    background-color: #2196F3;
    box-shadow: 0 0 110px 0 #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  -webkit-transition: width 0.3s linear, height 0.3s linear, border-width 0.1s linear, -webkit-transform 0.3s linear;
  transition: width 0.3s linear, height 0.3s linear, border-width 0.1s linear, -webkit-transform 0.3s linear;
  transition: width 0.3s linear, height 0.3s linear, border-width 0.1s linear, transform 0.3s linear;
  transition: width 0.3s linear, height 0.3s linear, border-width 0.1s linear, transform 0.3s linear, -webkit-transform 0.3s linear;
}


/* White Diamond Big */
.cursor.expanded {
  border-radius: 50px;
  width: 0px;
  height: 0px;
  border-width: 0px;
}    
</style>



<script>
class Cursor {
  constructor( el, target ) {
    this.el = el
    this.target = target
    this.triggerDistance = 90
    
    this.bind()
  }
  
  bind() {
    window.addEventListener( 'mousemove', this.move.bind( this ), false )
  }
  
  move( e ) {
    const cursorPosition = {
      left: e.clientX,
      top: e.clientY
    }

    const targetPosition = {
      left: this.target.getBoundingClientRect().left + this.target.getBoundingClientRect().width / 2,
      top: this.target.getBoundingClientRect().top + this.target.getBoundingClientRect().height / 2,
    }

    const distance = {
      x: targetPosition.left - cursorPosition.left,
      y: targetPosition.top - cursorPosition.top
    }

    const angle = Math.atan2( distance.x, distance.y )
    const hypotenuse = Math.sqrt( distance.x * distance.x + distance.y * distance.y )

    if( hypotenuse < this.triggerDistance ) {
      this.el.classList.add( 'expanded' )
      this.target.classList.add( 'expanded' )

      TweenMax.to( this.el, 0.3, {
        left: targetPosition.left - Math.sin( angle ) * hypotenuse / 5,
        top: targetPosition.top - Math.cos( angle ) * hypotenuse / 5
      } )
    } else {
      this.el.classList.remove( 'expanded' )
      this.target.classList.remove( 'expanded' )

      TweenMax.to( this.el, 0.3, {
        left: cursorPosition.left,
        top: cursorPosition.top
      } )
    }
  }
}

const element = document.getElementById( 'cursor' )
const target = document.getElementById( 'target' )
const cursor = new Cursor( element, target )
    
</script>