<h1>getRelativePosition() dot to pointer</h1>
<p><strong>Click anywhere!</strong> The green dot that's inside the rotated/scaled container will move to where the pointer clicked by using the <a href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()">getRelativePosition()</a> method. You can also drag the container and it'll still work.</p><br>



<div id="dot-container">Dot container<div id="dot"></div></div>













<a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>

body {
  padding: 10px 15px;
  text-align: center;
  overflow: hidden;
  background-color: #111;
  color: #aaa;
}

p {
  font-weight: 300;
  max-width: 900px;
  display: inline-block;
  text-align: left;
}

#dot-container {
  border: 2px solid #999;
  width: 200px;
  height: 100px;
  font-size: 28px;
  line-height: 45px;
  display: inline-block;
  border: 2px solid #ccc;
  color: #ddd;
  position: relative;
  background-color: #555;
}

#dot,
#dot-container::after  {
  position: absolute;
  top: 45px;
  left: 88px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  z-index: 100;
  background-color: #88ce02;
}

.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}

#dot-container::after { 
  content: '';
  top: 45px;
  left: 88px;
  z-index: 0;
  background-color: black;
}

gsap.registerPlugin(Draggable, MotionPathPlugin);

let dot = document.querySelector("#dot"),
    dotContainer = document.querySelector("#dot-container");

// apply some transforms to make it more impressive
gsap.to(dotContainer, {scale:0.6, rotation:25, y: 10, x: -10, duration:1.5, delay: 1});

document.addEventListener("click", function(e) {
		var p = MotionPathPlugin.getRelativePosition(dot, window, [0.5, 0.5], {x: e.pageX, y: e.pageY});
		gsap.to(dot, {
			x: "+=" + p.x,
			y: "+=" + p.y,
			duration: 0.5
		});
});

// make it draggable
Draggable.create(dotContainer, {bounds: window});