SOURCE

/*
  References:
  https://greensock.com/docs/Easing
  https://greensock.com/draggable
  https://skidding.github.io/dragdealer
*/

var disc = document.querySelector("#disc")
TweenMax.set(disc, { alpha:0, scale: 0.8, rotation: -360 })
TweenMax.to(disc, 1, { alpha:1, scale:1, ease: Power2.easeOut, onComplete: startDrag })
TweenMax.to(disc, 1, { rotation:0 , ease: Back.easeOut.config(1.7) })

function startDrag () {
  var drager = Draggable.create("#disc", {type: "rotation"})
  
  drager[0].addEventListener("dragend", function(e){
    var instance = Draggable.get(this)
    console.log(instance.target)
  })
}

<div class="container">
  <div id="disc" class="disc">
    <div class="pointer"></div>
  </div>
</div>

$radius: 500px;
$corner: $radius * .5;

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  background: #fff;

  .disc {
    position: absolute;
    display: flex;
    justify-content: center;
    width: $radius;
    height: $radius;
    background: radial-gradient(#0df, #0cf);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: $corner;
    cursor: pointer;
    box-shadow: 0 0 100px rgba(0,204,255,0.5);
    
    .pointer {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      margin: 20px;
      background: rgba(255,255,255,.5);
    }
  }
}