SOURCE

'use strict';

class Utils {
  constructor() {
    this.windowW = $(window).width();
    this.windowH = $(window).height();
  }
}

var utils = new Utils();
class App {
  constructor() {
    this.ball = document.getElementById("ball");
    this.body = document.querySelector("body");
  }
  init() {
    this.ballTaking = false;

    this.ball.addEventListener("mousedown", this.takeBall.bind(this));
    this.ball.addEventListener("mouseup", this.releaseBall.bind(this));
    this.body.addEventListener("mousemove", this.dragBall.bind(this));
    console.log(this.ball);
  }
  takeBall(e) {
    this.ballTaking = true;
  }
  dragBall(e) {
    let width = (100 - (Math.abs(parseInt((e.pageX - utils.windowW / 2) * 100 / utils.windowW)))) / 100;
    let height = (100 - (Math.abs(parseInt((e.pageY - utils.windowH / 2) * 100 / utils.windowH)))) / 100;

    let x = Math.round(e.pageX - utils.windowW / 2);
    let y = Math.round(e.pageY - utils.windowH / 2);

    let t = x / y;

    let r = -Math.round(Math.atan(t) * 180 / Math.PI);

    if (this.ballTaking) {
      TweenLite.to(this.ball, 0, {
        left: e.pageX,
        top: e.pageY,
        scaleX: (width + height) / 2,
        rotation: r
      });
    }
  }
  releaseBall(e) {
    this.ballTaking = false;

    TweenLite.to(this.ball, 2, {
      left: "50%",
      top: "50%",
      scaleX: 1,
      ease: Elastic.easeOut
    });

  }

}

var app = new App();

app.init();

<div id="ball">
</div>

body {
  overflow: hidden;
  background-color: #fa1a4a;
  height: 100vh;
  width: 100vw;
}

#ball {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: white;
  cursor: all-scroll;
  border-radius: 50%;
}