drawSVG not animating path

[Donatello666]

Hi,

 

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"/>
</svg>

 

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?

[Dipscom]

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?

 

 

[PointC]

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.

[Carl]

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

 

[PointC]

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. 

[Carl]

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

[Donatello666]

THX a lot guys,

 

i worked to hard yesterday.

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

[Dipscom]

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

 

Yeh, thank a bunch.