Jump to content
Search Community

drawing single SVG path locally issues

Johanna 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

This might be painfull to you but I am still very green behind the ears when it comes to Javascript and green sock.

I have a problem trying to draw a simple svg path. I am wanting to create it on my local machine as I will have to show our dev team how I created anything I do. I feel like Codepen does so much of the work for you that i have ofen had problems recreating it in a text editor (I use Brackets) I will provide screenshots of the code and if I can the SVG itself I know there isnt a lot in the screenshots however I have been trying to work this out all day (adding and removing code).  All I really want it to do is to draw the svg and maybe that it looks like it is being written. I don't doubt I have loads of mistakes in here but I hope someone can help me.


Thank you


2018-02-16 14 27 36.png

2018-02-16 14 27 51.png

epic compound path2.svg

Link to comment
Share on other sites

You have written tl.to which is the problem. Plus you are not including your script file(morph-main.js) in your html. Also, you are loading TweenMax from local file and from CDN at the same time.


You need to write it as follows,

TweenMax.from(shapes, 1, {drawSVG: 0});


In most examples you will see that we use tl, that is a timeline instance. To use timeline you need to first create an instance of timeline,


var tl = new TimelineMax();

tl.from(shapes, 1, {drawSVG: 0});


See the Pen padYwy?editors=1010 by Sahil89 (@Sahil89) on CodePen


Also, it is really hard to debug anything from code that's why we always request reduced case demos on codepen. Just curious why do you find it hard to use codepen? It shouldn't be. I mean it can be but it won't be hard if you give it a try. Plus looking at your files they can be copied in few seconds.


Also if you don't like brackets you can give Visual Studio Code a try, you will get code completion etc features for GSAP. I don't remember my experience with Brackets but it wasn't good enough to make it my regular editor.


Following is a post by @PointC that shows how you can create handwriting effect, might help you.




  • Like 4
Link to comment
Share on other sites

Thank you so much thats really helpful. 

I probably didnt explain correctly like using Codepen but when it comes to extracting my files and making them work locally thats where I struggle.

the linking of the javascripts and plug ins is where I seemed to have struggled in the past.


I also enjoy brackets and its not the software that is lacking but more me in knowlege and experience ^-^'


Thank you very much for helping me

I will try and build in codepen first then link the files up later.

  • Like 1
Link to comment
Share on other sites

@Johanna You are also missing jQuery file from your HTML. Following is how your files should be included.


<script src="morph-js/jquery.js"></script>
<script src="morph-js/TweenMax.js"></script>
<script src="morph-js/DrawSVGPlugin.js"></script>
<script src="morph-js/morph-main.js"></script>


and following is how your javascript should be written,


  var shapes = $('.cls-1');
  TweenMax.from(shapes, 1, {drawSVG: 0});


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