<h1>getGlobalMatrix()</h1>
<p>Drag the box below. When released, the green dot will animate to the top left corner using getGlobalMatrix() to calculate the position even though it's scaled and rotated. Feel free to change the transforms or nest the #dragme element as deeply as you want inside transformed containers.</p><br>
<div id="dragme">Drag me</div>
<div id="dot"></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;
}

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

#dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background-color: #88ce02;
}

#dragme {
  width: 200px;
  height: 140px;
  background-color: #555;
  color: white;
  text-align: center;
  line-height: 140px;
  font-size: 38px;
  display: inline-block;
  border: 2px solid #ccc;
}

.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}
gsap.registerPlugin(Draggable, MotionPathPlugin);

let dragme = document.querySelector("#dragme");

// apply some transforms to make it more impressive
gsap.to(dragme, {scale: 0.7, rotation: -20, y: 10, duration: 1.5});

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

// here is where the magic is...
function moveDot() {
    let matrix = MotionPathPlugin.getGlobalMatrix(dragme),
        // 0,0 is the top left corner, but try any local coordinates like {x: 200, y: 140} for the bottom right corner.
        localPoint = {x: 0, y: 0}, 
        // the matrix has an apply() method that applies the matrix transformations on a point, returning a new (translated) one.
        globalPoint = matrix.apply(localPoint);
    
    gsap.to("#dot", {
      x: globalPoint.x,
      y: globalPoint.y,
      ease: "power1.inOut"
    });
}

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js
  3. https://assets.codepen.io/16327/Draggable3.min.js