<svg version="1.1" id="qj-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 283.9 193.7" xml:space="preserve">
  <style type="text/css">
      .st0{display:none;fill:#41B649;}
      .st1{fill:#41B649;}
      .st2{display:none;}
      .st3{display:inline;}
      .st4{display:inline;fill:#FFFFFF;}
  </style>
  <g id="logo-wrapper">
      <path id="logo-j" d="M142.6,0c17.5,8.3,32.4,21.2,43.1,37.1h60.6v96c0,19.6-10.5,25.1-28.9,25.1h-20.8l32.9,34.8
          c30-2.9,54.4-15.6,54.4-65V0H142.6z"/>
      <g id="logo-q" class="st1">
        <image id="logo-pic" xlink:href="https://thinkx.net/uploads/images/Quinton-Jason.jpg" x="30" y="35" height="130px" width="130px"/>
          <path class="st1" d="M215.8,193.7l-39.5-41.8c10.8-15.6,17.2-34.6,17.2-55c0-53.4-43.3-96.7-96.7-96.7S0,43.5,0,96.9
              s43.3,96.7,96.7,96.7c19.5,0,37.5-5.8,52.7-15.6l14.9,15.7H215.8z M96.7,155.9c-32.6,0-59-26.4-59-59s26.4-59,59-59s59,26.4,59,59
              S129.3,155.9,96.7,155.9z"/>
      </g>
  </g>
</svg>
svg{
  width: 400px;
  margin: 0 auto;
  display: block;
}
#logo-pic{
  opacity: 0;
  visibility: hidden;
}
// when click on Logo
var logo = document.getElementById("qj-logo");
var logoQ = document.getElementById("logo-q");
var logoJ = document.getElementById("logo-j");
var logoPic = document.getElementById("logo-pic");
var logoExpanded = true;
var tl = new TimelineMax({ paused: true });

tl
	.to(logoJ, 0.45, { x: "-=31" }, "start")
	.to(logoPic, 0.35, { autoAlpha: 1 }, "start+=.3")
	.to(logoJ, 0.5, { autoAlpha: 0 }, "start")
	.to(logoQ, 0.75, { x: getCenter(logo, logoQ) }, "start");

function getCenter(x, y) {
	// get center of path inside SVG
	var xWid = x.getBoundingClientRect().width;
	var yWid = y.getBoundingClientRect().width;
	return (xWid - yWid) / 2;
}

logo.onclick = function(e) {
	// slide J from left to orig spot and fadeIn if not expanded
	if (logoExpanded) {
		tl.play();
	} else {
		tl.reverse();
	}

	logoExpanded = !logoExpanded;
};
Rerun