MorphSVGPlugin.defaultRender

Sets the default function that should be called whenever a morphSVG tween updates. This is useful if you’re rendering to <canvas>.

Video explanation

Demo: MorphSVG canvas rendering

Here’s an example of a tween and a render function that’d draw the morphing shape to canvas:

var canvas  = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    vw = canvas.width  = window.innerWidth,
    vh = canvas.height = window.innerHeight;
ctx.fillStyle = "#ccc";
MorphSVGPlugin.defaultRender = draw;
gsap.to("#hippo", {duration: 2, morphSVG: "#circle"});
function draw(rawPath, target) {
  var l, segment, j, i;
  ctx.clearRect(0, 0, vw, vh);
  ctx.beginPath();
  for (j = 0; j < rawPath.length; j++) {
    segment = rawPath[j];
    l = segment.length;
    ctx.moveTo(segment[0], segment[1]);
    for (i = 2; i < l; i+=6) {
      ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]);
    }
    if (segment.closed) {
      ctx.closePath();
    }
  }
  ctx.fill("evenodd");
}

Powered by Froala Editor