<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<h1>MorphSVG type:"rotational" for more natural morphs</h1>
<svg id="svg" viewBox="25 80 745 418">
	<path id="hippo" style="" d="M149,245c2.7-36.7,16.11-69.08,40.1-97.06c27.04-31.6,60.92-47.39,101.63-47.39c15.48,0,38.48,2.45,69.02,7.29 c30.54,4.89,53.53,7.28,69.03,7.28c23.69,0,57.87,8.85,102.53,26.48c7.91,3.01,17.47,11.24,28.7,24.59 c6.38,7.89,16.26,19.77,29.62,35.57c3.04,2.14,7,5.32,11.86,9.6c4.86,4.22,8.19,6.06,10,5.46c0.62-1.84,2.15-4.4,4.58-7.74 c1.21-1.23,1.96-1.83,2.26-1.83c0.93,0.61,1.83,1.21,2.75,1.83c0.91,0.62,1.21,2.42,0.91,5.46c-0.62,5.47-0.91,7.14-0.91,5	c-0.33,3.06-0.76,5.01-1.37,5.95c-3.95,6.67-5.48,11.85-4.55,15.47c0.92,3.32,3.77,8.67,8.64,15.96c4.87,7.29,7.59,12.76,8.19,16.4 c-0.3,2.73-0.43,7.12-0.43,13.21l-4.57,11.38c0,8.51,9.86,23.11,29.62,43.78c9.44,4.22,14.12,18.83,14.12,43.71 c0,19.47-16.09,29.17-48.27,29.17c-4.26,0-8.81-0.13-13.68-0.47c-3.34-1.2-8.2-2.56-14.58-4.07c-7.59-0.93-12.76-3.49-15.48-7.77 c-4.88-6.95-12.78-13.51-23.71-19.58c-1.82-0.88-4.48-4.22-7.98-10.02c-3.5-5.77-6.61-9.42-9.33-10.95 c-2.72-1.49-6.68-1.81-11.86-0.88c-8.81,1.49-13.68,2.26-14.57,2.26c-2.14,0-5.25-0.6-9.34-1.83c-4.11-1.21-7.05-1.83-8.89-1.83 c-2.11,9.73-2.59,19.15-1.36,28.25c0.3,2.45,1.83,4.43,4.56,5.92c4.27,3.05,6.53,4.71,6.85,5.05c2.72,2.11,5.61,5.61,8.64,10.45 c0.62,1.85-0.52,4.95-3.42,9.34c-2.89,4.41-5.22,7.01-7.06,7.74c-1.81,0.79-5.77,1.18-11.85,1.18c-8.82,0-29.45-2.45-30.98-2.73 c-7.59-1.53-14.13-3.94-19.58-7.3c-2.76-1.81-5.91-10.33-9.56-25.52c-3.68-16.41-6.72-26.27-9.14-29.64 c-0.6-0.9-1.36-1.33-2.26-1.33c-1.53,0-4.05,1.49-7.53,4.56c-3.49,2.99-5.86,4.65-7.05,5.01c-4.24,17.9-6.4,26.4-6.4,25.47 c0,7.01,1.97,12.89,5.92,17.77c3.94,4.86,8.06,9.57,12.32,14.11c5.16,5.77,7.74,10.78,7.74,15.04c0,2.41-0.75,4.52-2.28,6.37 c-6.38,7.89-17.02,11.85-31.9,11.85c-16.71,0-27.64-2.28-32.79-6.84c-6.7-5.77-10.95-11.86-12.76-18.2 c-0.3-1.53-1.05-6.09-2.28-13.68c-0.61-4.58-1.98-7.29-4.08-8.18c-6.1-0.92-13.69-2.58-22.78-5.01c-1.84-1.21-3.81-4.26-5.94-9.12 c-3.93-9.4-6.83-15.79-8.66-19.13c-9.13-4.56-23.7-9.7-43.76-15.45c-0.92,1.83-1.35,4.37-1.35,7.72c3.34,4.26,8.34,10.8,15.03,19.58 c5.47,7.29,8.2,14.3,8.2,20.96c0,12.78-8.2,19.13-24.61,19.13c-12.45,0-20.96-0.88-25.52-2.71c-6.67-2.73-12.29-9.14-16.85-19.13 c-7.6-16.74-11.85-26.16-12.76-28.27c-4.87-11.23-8.2-21.13-10.01-29.65c-1.23-6.05-3.06-15.35-5.49-27.8 c-2.12-10.3-5.46-18.36-10.01-24.13C155.33,279.36,147.5,260.6,149,245z"/>

	<path id="circle" d="M490.1,280.649 c0,44.459-36.041,80.5-80.5,80.5s-80.5-36.041-80.5-80.5s36.041-80.5,80.5-80.5S490.1,236.19,490.1,280.649z" />

	<path id="star" d="M409.6,198.066l26.833,54.369l60,8.719l-43.417,42.321l10.249,59.758L409.6,335.019 l-53.666,28.214l10.249-59.758l-43.417-42.321l60-8.719L409.6,198.066z" />

	<path id="elephant" d="M446.47,99.67c12.1,0,23.83,7,35.23,20.99c11.38,13.99,17.97,20.99,19.76,20.99h17.12 c37,0,65.65,18.52,85.96,55.55c5.35,10.37,13.52,25.59,24.58,45.7c11.01,20.14,23.86,35.01,38.46,44.63 c16.37,10.69,32.92,16.59,49.64,17.63c7.82,0.36,16.39-1.07,25.66-4.3c8.19-3.58,16.36-7.17,24.54-10.75l5.34,11.86 c-26.34,20.21-51.44,30.64-75.3,31.36c-25.62,0.71-53.23-5.51-82.76-18.64c25.26,29.2,47,47.01,65.16,53.39l-4.27,4.3	c-32.04-5.7-61.61-22.1-88.65-49.15c0,0-22.7,15.71-25.37,17.3c-2.67,1.6-3.85,2.91-3.49,3.98c1.43,4.63,8.74,16,21.91,34.06	c13.17,18.13,19.76,27.71,19.76,28.75c0,3.2-4.1,6.38-12.29,9.59c-8.18,3.19-12.62,6.75-13.33,10.65c-0.72,3.2,0.33,7.11,3.2,11.71	c2.83,4.63,4.26,7.43,4.26,8.53c0,7.08-6.23,11.51-18.67,13.3c-2.16,0.33-8.94,0.53-20.31,0.53c-21.35,0-36.67-4.8-45.93-14.35	c-7.47-8.15-13.36-23.05-17.64-44.66c-1.43-7.43-3.91-20.73-7.47-39.9c-36.31,9.25-73.7,13.89-112.17,13.89	c-23.51,0-48.96-1.76-76.38-5.34c4.64,11.76,11.22,31.36,19.8,58.77c-17.81-2.5-39.19-6.05-64.09-10.69	c-11.06,16.72-20.51,24.74-28.33,24.03c-13.89-1.05-33.84-7.99-59.82-20.8c-6.42-3.2-9.61-8.02-9.61-14.44	c0-6.39,4.99-18.16,14.96-35.24c9.95-17.08,15.29-29.01,16.01-35.79c0.72-6.07-1.04-14.4-5.31-25.1	c-5.34-13.89-11.22-40.06-11.22-40.06c-16.39,17.8-31.35,30.8-44.88,38.99c-15.68,9.61-34.2,15.87-55.55,18.67	c-4.27-4.24-7.11-6.38-8.54-6.38c26.34-11.41,52.35-29.38,77.97-53.96c1.08-1.07,7.82-5.86,20.31-14.44	c7.1-4.62,11.37-10.1,12.81-16.52c8.89-35.6,27.05-60.73,54.46-75.34c22.43-11.74,53.95-17.6,94.53-17.6	c18.52,0,36.15,1.24,52.88,3.72c7.83,2.15,20.31,4.66,37.39,7.49c1.43-14.17,6.42-26.75,14.96-37.74 C421.38,106.06,432.95,99.67,446.47,99.67z" />
  
  <path id="ghost" />

</svg>

<div class="controls">
  
  <ul>
    <li>
      Type: <div style="display:inline-block; vertical-align:top;"><label><input type="radio" name="type" id="linear" value="linear" checked /> linear</label><br><label><input type="radio" name="type" id="rotational" value="rotational" /> rotational</label></div>
    </li>
    <li id="originContainer" style="margin-top:-8px; padding-left:114px;font-size:17px; margin-bottom:5px;">
      origin: <input type="text" value="50% 50%" id="origin" name="origin" minlength="5" disabled size="10" style="background-color:#111; color:#ccc; border: none; padding:4px; vertical-align:baseline; font-size:15px;">
    </li>
    <li>
      <label><input type="checkbox" name="showHandles" id="showHandles" value="1" checked /> show anchors</label>
    </li>
  </ul>
 
  <p>The new <code>type:"rotational"</code> option does two things: 
    <ol style="max-width:385px;">
      <li>Avoids kinks by finding any anchors that are smooth in <strong>both</strong> the starting <strong>and</strong> ending shapes and forcing them to <i>stay</i> smooth during the morph.</li>
      <li>Instead of linearly interpolating between coordinates (straight lines), it rotates them around an origin (<span style="color:#9bea00; font-weight:600; font-size:20px">green dot</span> in this demo) which is centered on the shapes by default but you can use any percentage-based values or keywords like <code>"center top"</code> or <code>"20% 80%"</code>.</li>
    </ol>
  
  <p>Example code:</p><code>TweenMax.to("#start", 2, {<br>
  &nbsp;&nbsp;morphSVG:{<br>&nbsp;&nbsp;&nbsp;&nbsp;shape:"#end", <br>&nbsp;&nbsp;&nbsp;&nbsp;type:"rotational", <br>&nbsp;&nbsp;&nbsp;&nbsp;origin:"20% 60%"<br>&nbsp;&nbsp;},<br>
  &nbsp;&nbsp;ease:Power1.easeInOut<br>
});  </code>
  
  </p>

  <p>Learn more about <a href="https://greensock.com/morphSVG/">MorphSVGPlugin</a>.</p>
</div>
#ghost {
  opacity:0.2;
  visibility: visible;
  stroke-width:1px;
  stroke: white; 
  fill:none;
}
body {
  background-color: #222;
  color: #bbb;
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
}
h1 {
  padding-left: 12px;
  color: white;
}
h2 {
  font-weight: 400;
  color: #ddd;
}
#svg path {
  fill: #765e98;
  stroke: #fff;
  stroke-width: 1;
	stroke-linecap:round;
	stroke-linejoin:round;
}

#svg {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
}


a {
  color: #88ce02;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  display:inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #575757, #414141);
  background-image: -moz-linear-gradient(top, #575757, #414141);
  background-image: -ms-linear-gradient(top, #575757, #414141);
  background-image: -o-linear-gradient(top, #575757, #414141);
  background-image: linear-gradient(to bottom, #575757, #414141);
  text-shadow: 0px 1px 0px #414141;
  -webkit-box-shadow: 0px 1px 0px 414141;
  -moz-box-shadow: 0px 1px 0px 414141;
  box-shadow: 0px 1px 0px 414141;
  color: #ffffff;
  text-decoration: none;
  margin: 0 auto;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  padding: 12px 25px;
  font-family: "Signika Negative", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
}

button:hover {
  background: #57a818;
  background-image: -webkit-linear-gradient(top, #57a818, #4d9916);
  background-image: -moz-linear-gradient(top, #57a818, #4d9916);
  background-image: -ms-linear-gradient(top, #57a818, #4d9916);
  background-image: -o-linear-gradient(top, #57a818, #4d9916);
  background-image: linear-gradient(to bottom, #57a818, #4d9916);
  text-shadow: 0px 1px 0px #32610e;
  -webkit-box-shadow: 0px 1px 0px fefefe;
  -moz-box-shadow: 0px 1px 0px fefefe;
  box-shadow: 0px 1px 0px fefefe;
  color: #ffffff;
  text-decoration: none;
}

.controls {
	font-size: 18px;
  position: absolute;
  left: 18px;
  margin-bottom:60px;
}
.controls ul {
	list-style: none;
	padding: 0;
	margin: -10px 0 0 0;
}
.controls ul li {
  font-size: 26px;
	padding: 4px 28px;
	margin:0;
  color: #eee;
}
.controls ol li {
  padding-bottom: 12px;
}
.controls input {
  vertical-align:middle;
  cursor: pointer;
}

code {
  color: #ccc;
}
#elephant, #circle, #star {
  visibility: hidden;
}

@media only screen and (max-width: 850px)  {
  h1 {
    font-size: 28px;
  }
  #svg {
    position: static;
    width: auto;
    height: auto;
    margin-top: -20px;
    margin-bottom: -25px;
  }
}
var rotation = document.querySelector("#rotational"),
    linear = document.querySelector("#linear"),
    showHandles = document.querySelector("#showHandles"),
    origin = document.querySelector("#origin"),
    originContainer = document.querySelector("#originContainer"),
    ghost = document.querySelector("#ghost"),
    devTools, tracer, tl;

TweenLite.defaultEase = Power1.easeInOut;
ghost.setAttribute("d", document.querySelector("#hippo").getAttribute("d"));

rotation.addEventListener("change", start);
linear.addEventListener("change", start);
showHandles.addEventListener("change", start);
origin.addEventListener("change", start);

function start(paused) {
  if (tracer) {
    for (var i = 0; i < tracer.length; i++) {
      tracer[i].kill();
    }
  }
  if (devTools) {
    devTools.kill();
  }
  if (tl) {
    tl.progress(0).kill();
  }
  var type = rotation.checked ? "rotational" : "linear";
  origin.disabled = !rotation.checked;
  originContainer.style.opacity = rotation.checked ? "1" : "0.3";
  tl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1.5, delay:1, id:"morphing", paused:(paused === true)});
  var tween = TweenLite.to("#hippo", 3, {morphSVG:{shape:"#circle", type:type, origin:origin.value}});
  tl.add(tween);
  ghost.style.visibility = rotation.checked ? "visible" : "hidden";
  if (rotation.checked) {
    tl.to(ghost, 3, {morphSVG:"#circle"}, 0);
  }
  if (showHandles.checked) {
    tracer = MorphTracer.create(tween, {precision:0.5, lineOpacity:0.4, lineColor:"#886ead", originColor:"#9bea00"});
  }
  devTools = GSDevTools.create({animation:tl, globalSync:false, loop:true});
}


var showing = true;
document.querySelector("#svg").addEventListener("click", function() {
  showing = !showing;
  TweenLite.set(".controls, h1", {visibility:showing ? "visible" : "hidden"});
  tl.play();
});




//----- MorphTracer helper class ---------------

function MorphTracer(tween, v) {
	var _defaults = function(o, d) {
			for (var p in d) {
				if (!(p in o)) {
					o[p] = d[p];
				}
			}
			return o;
		},
		vars = _defaults(v || {}, {anchorSize:1.5, originSize:3, originColor:"red", anchorColor:"white", lineWidth:1, lineColor:"white", lineOpacity:0.15, controlPoints:false, precision:1}),
		_cos = Math.cos,
		_sin = Math.sin,
		_atan2 = Math.atan2,
		_sqrt = Math.sqrt,
		_createSVG = function(type, container, attributes) {
			var element = document.createElementNS("http://www.w3.org/2000/svg", type),
				reg = /([a-z])([A-Z])/g,
				p;
			for (p in attributes) {
				element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
			}
			container.appendChild(element);
			return element;
		},
		_pointToSegDist = function(x, y, x1, y1, x2, y2) {
			var dx = x2 - x1,
				dy = y2 - y1,
				t;
			if (dx || dy) {
				t = ((x - x1) * dx + (y - y1) * dy) / (dx * dx + dy * dy);
				if (t > 1) {
					x1 = x2;
					y1 = y2;
				} else if (t > 0) {
					x1 += dx * t;
					y1 += dy * t;
				}
			}
			dx = x - x1;
			dy = y - y1;
			return dx * dx + dy * dy;
		},
		_simplifyStep = function(points, first, last, tolerance, simplified) {
			var maxSqDist = tolerance,
				firstX = points[first],
				firstY = points[first+1],
				lastX = points[last],
				lastY = points[last+1],
				index, i, d;
			for (i = first + 2; i < last; i += 2) {
				d = _pointToSegDist(points[i], points[i+1], firstX, firstY, lastX, lastY);
				if (d > maxSqDist) {
					index = i;
					maxSqDist = d;
				}
			}
			if (maxSqDist > tolerance) {
				if (index - first > 2) {
					_simplifyStep(points, first, index, tolerance, simplified);
				}
				simplified.push(points[index], points[index+1]);
				if (last - index > 2) {
					_simplifyStep(points, index, last, tolerance, simplified);
				}
			}
		},
		_simplifyPoints = function(points, tolerance) {
			var prevX = points[0],
				prevY = points[1],
				temp = [prevX, prevY],
				l = points.length - 2,
				i, x, y, dx, dy, result, last;
			tolerance = tolerance || 1;
			tolerance *= tolerance;
			for (i = 2; i < l; i += 2) {
				x = points[i];
				y = points[i+1];
				dx = prevX - x;
				dy = prevY - y;
				if (dx * dx + dy * dy > tolerance) {
					temp.push(x, y);
					prevX = x;
					prevY = y;
				}
			}
			temp.push(points[l], points[l+1]);
			last = temp.length - 2;
			result = [temp[0], temp[1]];
			_simplifyStep(temp, 0, last, tolerance, result);
			result.push(temp[last], temp[last+1]);
			return result;
		},
		_pointsToSegment = function(points, tolerance, cornerThreshold, curviness) {
			points = _simplifyPoints(points, tolerance);
			var l = points.length-2,
				x = +points[0],
				y = +points[1],
				nextX = +points[2],
				nextY = +points[3],
				segment = [x, y, x, y],
				dx2 = nextX - x,
				dy2 = nextY - y,
				prevX, prevY, angle, slope, i, dx1, dx3, dy1, dy3, d1, d2, a, b, c;
			if (isNaN(cornerThreshold)) {
				cornerThreshold = Math.PI / 10;
			}
			curviness = (curviness || curviness === 0) ? +curviness * 0.4 : 0.4;
			for (i = 2; i < l; i+=2) {
				prevX = x;
				prevY = y;
				x = nextX;
				y = nextY;
				nextX = +points[i+2];
				nextY = +points[i+3];
				dx1 = dx2;
				dy1 = dy2;
				dx2 = nextX - x;
				dy2 = nextY - y;
				dx3 = nextX - prevX;
				dy3 = nextY - prevY;
				a = dx1 * dx1 + dy1 * dy1;
				b = dx2 * dx2 + dy2 * dy2;
				c = dx3 * dx3 + dy3 * dy3;
				angle = Math.acos( (a + b - c) / _sqrt(4 * a * b) ); //angle between the 3 points
				d2 = (angle / Math.PI) * curviness; //temporary precalculation for speed (reusing d2 variable)
				d1 = _sqrt(a) * d2; //the tighter the angle, the shorter we make the handles in proportion.
				d2 *= _sqrt(b);
				if (angle > cornerThreshold) {
					slope = _atan2(dy3, dx3);
					segment.push(x - _cos(slope) * d1, y - _sin(slope) * d1, x,	y, x + _cos(slope) * d2, y + _sin(slope) * d2);
				} else {
					slope = _atan2(dy1, dx1);
					segment.push(x - _cos(slope) * d1, y - _sin(slope) * d1);
					slope = _atan2(dy2, dx2);
					segment.push(x, y, x + _cos(slope) * d2, y + _sin(slope) * d2);
				}
			}
			segment.push(nextX, nextY, nextX, nextY);
			return segment;
		},
		self = this,
		path = tween.target[0] || tween.target,
		svg = path.ownerSVGElement,
		linesGroup = _createSVG("g", svg, {class:"morph-tracer morph-tracer-lines"}),
		anchorsGroup = _createSVG("g", svg, {class:"morph-tracer morph-tracer-anchors"}),
		origin = _createSVG("circle", svg, {r:vars.originSize, style:"fill:" + vars.originColor, class:"morph-tracer morph-tracer-origin"}),
		lines = [],
		anchors = [],
		_origCallback = function(name) {
			var callback = tween.vars[name],
				scope = tween.vars[name + "Scope"] || tween,
				params = tween.vars[name + "Params"] || [];
			if (callback) {
				return function() {
					callback.apply(scope, params);
				}
			}
		},
		_origOnStart = _origCallback("onStart"),
		_origOnUpdate = _origCallback("onUpdate"),
		lengths = [],
		_initted,
		_init = function() {
			var time = tween.time(),
				duration = tween.duration(),
				l = vars.precision * 100,
				inc = duration / l,
				positions = [],
				t, i, j, sl, segment, ai, rawPath, line, x, y, dx, dy, a, pos;
			for (t = 0; t < l; t++) {
				tween.render((t * inc) || 0.00001, true);
				rawPath = path._gsRawPath || MorphSVGPlugin.stringToRawPath(path.getAttribute("d"));
				ai = 0; //anchor index
				for (j = 0; j < rawPath.length; j++) {
					segment = rawPath[j];
					sl = segment.length;
					for (i = 0; i < sl; i+=6) {
						x = segment[i];
						y = segment[i+1];
						pos = positions[ai];
						if (!pos) {
							positions[ai] = [x, y];
							lengths[ai] = [0];
							anchors[ai] = _createSVG("circle", anchorsGroup, {r:vars.anchorSize, style:"fill:" + vars.anchorColor});
						} else {
							dx = x - pos[pos.length - 2];
							dy = y - pos[pos.length - 1];
							pos.push(x, y);
							lengths[ai].push(lengths[ai][lengths[ai].length-1] + _sqrt(dx * dx + dy * dy));
						}
						ai++;
					}
				}
			}
			for (i = 0; i < positions.length; i++) {
				line = _createSVG("path", linesGroup, {d:MorphSVGPlugin.rawPathToString([_pointsToSegment(positions[i], 0.5)]), class:"morph-tracer morph-tracer-line", fill:"none", style:"fill:none;opacity:" + vars.lineOpacity + ";stroke:" + vars.lineColor + ";stroke-width:" + vars.lineWidth});
				lines.push(line);
			}
			for (j = 0; j < lengths.length; j++) {
				a = lengths[j];
				l = a[a.length-1];
				for (i = 0; i < a.length; i++) {
					a[i] /= l;
				}
				lines[j].totalLength = lines[j].getTotalLength();
				lines[j].style.strokeDasharray = lines[j].totalLength + "px, " + lines[j].totalLength + "px";
				lines[j].style.strokeDashoffset = -lines[j].totalLength;
			}
			tween.render(time, true);
			_initted = true;
		};

	this.hide = function() {
		linesGroup.style.visibility = origin.style.visibility = anchorsGroup.style.visibility = "hidden";
	};

	this.show = function() {
		linesGroup.style.visibility = origin.style.visibility = anchorsGroup.style.visibility = "visible";
	};

	this.kill = function() {
    if (origin.parentNode) {
      origin.parentNode.removeChild(origin);
      anchorsGroup.parentNode.removeChild(anchorsGroup);
		  linesGroup.parentNode.removeChild(linesGroup);
    }
		anchors.length = lines.length = 0;
	};

	tween.eventCallback("onStart", function() {
		if (!_initted) {
			_init();
		}
		if (_origOnStart) {
			_origOnStart();
		}
	}).eventCallback("onUpdate", function() {
		if (_initted && anchors.length) {
			var p = tween.progress() * (vars.precision * 100),
				timeIndex = p | 0,
				t = p - timeIndex,
				rawPath = path._gsRawPath || MorphSVGPlugin.stringToRawPath(path.getAttribute("d")),
				originPoint = rawPath.origin || {x:0, y:0},
				ai = 0, //anchor index
				rnd = 100,
				i, j, segment, factor;
			//adjust the length of all the lines (strokeDashoffset)
			for (i = 0; i < lines.length; i++) {
				factor = lengths[i][timeIndex];
				factor += ((lengths[i][timeIndex + 1] - factor) || 0) * t;
				lines[i].style.strokeDashoffset = lines[i].totalLength * (1-factor);
			}
			//position all the anchors
			for (j = 0; j < rawPath.length; j++) {
				segment = rawPath[j];
				for (i = 0; i < segment.length; i+=6) {
					anchors[ai++].setAttribute("transform", "translate(" + (((segment[i] * rnd) | 0) / rnd) + "," + (((segment[i+1] * rnd) | 0) / rnd) + ")");
					//console.log(ai-1, anchors[ai-1].getAttribute("transform"));
				}
			}
			origin.setAttribute("transform", "translate(" + originPoint.x + ", " + originPoint.y + ")");
			if (path._gsMorphTracer !== self) {
				if (path._gsMorphTracer) {
					path._gsMorphTracer.hide();
				}
				self.show();
				path._gsMorphTracer = self;
			}
		}
		if (_origOnUpdate) {
			_origOnUpdate();
		}
	});

	this.path = path;
}


MorphTracer.create = function(animation, vars) {
	var result = [],
		a = animation.getChildren ? animation.getChildren(true, true, false) : [animation],
		i;
	for (i = 0; i < a.length; i++) {
		if (a[i].vars.morphSVG) {
			result.push(new MorphTracer(a[i], vars));
		}
	}
	return result;
};

//tracer = MorphTracer.create(tl, {precision:0.5, lineOpacity:0.1});

start(true);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js