Jump to content

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

drawSVG not animating path

Recommended Posts



i got a strange problem:

I want to animate the following SVG:


<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <path id="cross" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256"/>


TweenMax.to( $('#cross') , 1, { drawSVG:"0%" } );


I see in the DOM-Tree GSAP is changing values, but without any visual changes.


What am I doing wrong?

Link to comment
Share on other sites

Hi @Michelangelo666,


It's very hard to guess what could be going wrong in this situation. Do you think you could make a Pen showing your issue?



Link to comment
Share on other sites

Hi @Michelangelo666 :)


If I had to guess, I'd say there isn't a stroke on the path, but as @Dipscom mentioned, we'd really need to see a demo to be certain.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

I did a quick paste of your SVG into a CodePen demo.

Seems you did not have a stroke applied. 

When I applied a stroke color and width it appears the stroke does not cover the whole shape. Perhaps you need to close the path.

You can seen in the demo that DrawSVG will work fine on the stroke around the path.


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


  • Like 2
Link to comment
Share on other sites

You can close it with the 'Z' command.


See the Pen eGrqdY by PointC (@PointC) on CodePen


@Carl - papayawhip? I don't think I've ever heard of that one. Now I'm craving a smoothie. :D

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@PointC ha. glad you liked the papayawhip. I used to use it 100 years ago in a basic HTML class I taught as an example of ridiculous and valid HTML color names. Thanks for closing the path!

Link to comment
Share on other sites

THX a lot guys,


i worked to hard yesterday.

Well, i was only using the fill-property, no path... ;) applied

Link to comment
Share on other sites

Great work peoples. I now need to work double as hard to make sure I won't be looking lazy.


Yeh, thank a bunch. :cry:

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.