Jump to content
Search Community

morphSVG not working outside of codepen

sirhclluk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I just used your codepen to make sure I could get my own basic shapes to morph.

I works, but! 

I can't get this morph to work outside of codepen. I can only assume it's my js library links?


I have these 4 linked along with tweenmax & morphsvg linked from my desktop.

<link rel="stylesheet" type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
Please help me morph!

See the Pen QNEGvv by sirhclluk (@sirhclluk) on CodePen

Link to comment
Share on other sites

Hello sirhclluk


That is because the GSAP MorphSVGPlugin is a Club GreenSock Plugin for members only with a Club GreenSock Membership (Shockingly Green or Business Green). The MorphSVGPlugin on codepen is only supposed to work on codepen for this very reason. So this way you can test and play with the MorphSVGPlugin for FREE.


More info found on the MorphSVGPlugin. Docs page:




The following is taken from that MorphSVGPlugin page:

  • Get your hands on MorphSVGPlugin
    MorphSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP.
  • Try MorphSVGPlugin for free on Codepen!
  • There's a special [fully-functional] version of DrawSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. Codepen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the Codepen domain.
  • To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan.

I do have business green.  


I have it working built in dreamweaver now. 


I was trying to use it with Tumult Hype, but I've killed a whole day with no luck.

If anyone is able to make it work within Tumult Hype please pass it on.



Link to comment
Share on other sites

Glad you got it working in Dreamweaver.


I have no experience with Tumult hype so I'm not sure how it handles svg. Are you adding your SVG inline so that the svg source is accessible in the page like

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

or is tumult using an img tag like

<img src="some.svg"/>

Also is the browser showing any errors?

  • Like 1
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.
  • Create New...