<div id="box">
  <span id="origin"></span>
</div>
body {
  background-color: black;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100vh;
  padding: 0;
  margin: 0;
  padding: 4rem;
}

#box {
  width: 200px;
  height: 200px;
  background: #28a92b;
  position: relative;
}

#origin {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 99%;
  bottom: 5px;
  right: 5px;
}
gsap.to("#box", {
  duration: 3,
  delay: 2,
  scale: 0.5,
  transformOrigin: "right bottom",
  ease: "sine.out",
  onComplete: anim_completed
});

function anim_completed() {
  smoothOriginChange("#box", "left top");
  gsap.to("#box", { duration: 3, scale: 1 });
  
  
  // ignore following line - just moving the white dot for demo purposes
  gsap.set("#origin", { y: -165, x: -165});
}

function smoothOriginChange(element, transformOrigin) {
  if (typeof element === "string") {
    element = document.querySelector(element);
  }
  var before = element.getBoundingClientRect();
  element.style.transformOrigin = transformOrigin;
  var after = element.getBoundingClientRect();
  gsap.set(element, {
    x: "+=" + (before.left - after.left),
    y: "+=" + (before.top - after.top)
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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