Canvas and morphSVG causing unexpected results.

[elegantseagulls 209 Likes (Specialist)]

Hey fellow GSAP friends,

 

Having some inconsistency issues, and I'm not sure where they are stemming from when trying to use morphSVG in canvas. I've looked at @OSUblake, example, but even with his implementation cannot figure out what's up. I'm tweening the path as a variable object rather than a dom element. I imagine that's what's causing the issue, but why?

 

See codepen:

 

 

Thanks!

 

See the Pen OYYKON?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen

[GreenSock 8,117 Likes (Superhero)]

That's because morphSVG assumes the target is an SVG <path>, but in your case you've got a generic object with a property named "morphSVG" that you're trying to have it animate. You've gotta tell MorphSVGPlugin that. Luckily in the latest version I did bake in an [undocumented] easy way to do that - just specify a "prop" like: 

 

.to(gulls, 1, { morphSVG: {shape:heart, prop:"morphSVG"} }, 0)

 

That should fix your demo, but if you want even better compatibility you could use the new "render" feature that points to a function that you can use like this: 

See the Pen 59a09cd93d50807d3e8861e90d19074e?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some browsers don't recognize the Path2D() thing, but the render method I show above should work in every major browser and is likely a tad bit faster anyway. 

 

Does that help? 

 

[elegantseagulls 209 Likes (Specialist)]

@GreenSock Thank you so much! Been finding certain browsers' limits of performantly tweening SVGs a lot quicker these days it seems, so this is very helpful!