LVWYgM

index.html

<div id="layout">
  <div id="s1" class="scene">
    <svg>
      <g id="circle-set">
      <circle fill="black"
              r="40" cx="100" cy="100"/>
      <circle fill="red"
              r="40" cx="190" cy="100"/>
      </g>
    </svg>
  </div>

  <div id="s2" class="scene">
    <svg>
      <rect fill="black"
            width="100" height="150" x="50" y="50"/>
      <rect fill="red"
            width="100" height="150" x="50" y="225"/>
    </svg>
  </div>
</div>

LVWYgM.markdown

LVWYgM

A Pen by Jason Yamada-Hanff on CodePen.

License.

script.js

var tl = new TimelineMax({repeat:0, repeatDelay:0.5});
//var cs = document.getElementById("circle-set");

var winw = window.innerWidth;
var winh = window.innerHeight;
//var elw = cs.clientWidth;
//var elh = cs.clientHeight;
//var cp = {x:(winw - elw)/2, y:(winh - elh)/2};

//TweenMax.set("#layout", {transformOrigin:"0% 0%"});
//TweenMax.set("#layout", {scale: 1});
//tl.set(cs, cp);
//tl.to(cs, 1, {itemOrigin:"50% 50%"});

//cs.onclick = function() {
//  tl.restart();
//}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.css

.scene {
  position: relative;
  display: inline-block;
  width: 640px;
  height: 480px;
  margin: 20px 0px 0px 20px;
}

.scene svg {
  width: 640px;
  height: 480px;
}

#layout {
  width: 150px;
}

#s1 {
  background-color: lightblue;
}

#s2 {
  background-color: lightgray;
}