Canvas and morphSVG causing unexpected results.
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 eleg
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 u
