Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Canvas and morphSVG causing unexpected results.

Recommended Posts

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:





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

Link to comment
Share on other sites

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? 


  • Like 3
Link to comment
Share on other sites

@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!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.