Jump to content
Search Community

Hosted DrawSVGPlugin doesn't seem to work

mishunov 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

There seems to be a problem with DrawSVGPlugin for me: I can not make it work when I try with the hosted file and not within Codepen. I am 

ShockinglyGreen member so there is no issue with this. The problem is that I run the same code against Codepen-specific version and against the hosted version of the script. You can see the result yourself:


Codepen-specific (where lines get drawn): 

See the Pen Gverwq by mishunov (@mishunov) on CodePen

And here is the other version with the file being self-hosted on a server: 

See the Pen MvxpqN by mishunov (@mishunov) on CodePen


As you can see in this second case, the lines do not get drawn and the whole contour shows up instantly


What do I miss here?

Thank you.

Link to comment
Share on other sites

Hi @mishunov :)


Welcome to the forum and thanks for joining Club GreenSock.


That looks like a problem with CodePen and http vs https. If you look at the pen settings JavaScript, you'll see this error.




For CodePen work, it's best to use the CodePen safe versions of Club plugins. Here's a pen that loads all of them:


See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

It's also best to use the latest version of TweenMax (1.20.2) rather than an older version. 


Hopefully this helps. Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Hello, @PointC


Thanks for pointing out to this HTTPS/HTTP issue. I was aware of that but didn't pay enough attention to it since it doesn't work locally for me as well. Is it correct to say that DrawSVGPlugin work only over HTTPS or (possibly) localhost?


The reason I'm asking is because I am running the dev site locally at and for the DrawSVGPlugin file hosted on the same site it does not work either. Is there any way I can develop with this plugin locally on HTTP? Or I should set up local dev server to serve the site over https? Also what do I do for production if my site is not served over HTTPS?


If this is the case this should be in the documentation I believe since this is very not intuitively clear since, for example, MorphSVG works great over http. It also takes a lot of time to come up to this conclusion.

Link to comment
Share on other sites

hmmm... that shouldn't be an issue. I use that plugin locally and on non-secure sites all the time with no problems. If morph works for you, I'm not sure why DrawSVG would be causing trouble.


You are using the version from your download dashboard and not the one from CodePen, right? 



  • Like 1
Link to comment
Share on other sites

Just now, PointC said:

You are using the version from your download dashboard and not the one from CodePen, right? 


Exactly. Have re-downloaded everything just now. MorphSVG works, DrawSVG doesn't :( Serving the local site from https now without any success still… should be something really stupid here apparently…


Anyway, thanks for the prompt response. Will try to dig deeper and will come back if things still don't work after some attempts.

Link to comment
Share on other sites

4 minutes ago, OSUblake said:



Look at my response. It's on your end. Google this.




Hey, OSUblake! Thanks for your response but I have seen it, of course, and it is related to the same issue pointed out by PointC. It's the same and is not really "my end" but the issue with mixing HTTP and HTTPS resources on Codepen. But the problem is that I can not get it working locally either and there are no console errors and no mixed protocols here.

Link to comment
Share on other sites

UPDATE: Thanks for all the answers, guys. I found the problem. It was… I loaded the script in the wrong way :-P Since I am working with Polymer and include files with HTML imports, I have messed up inclusion of the regular scripts like GSAP plugins. Fixed it now and it works like a charm! Thank you very much :)

  • Like 3
Link to comment
Share on other sites

Hi @mishunov


Glad you got it working!


And maybe I wasn't be clear. By your end, I was talking about your host. I wasn't even looking at CodePen. I was running your original demo locally.


Something isn't configured correctly. Using https for your script blocks it because it's an insecure connection. Using http results in a 404


Try accessing these links directly. I'll remove them in a few so other people won't snag them.




  • Like 2
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...