SVG line animation

[Meds86 2 Likes (Newbie)]

I'm new to SVG's and trying to get this to animate.

 

I thought something like this would work

TweenLite.fromTo('.path', 1, {drawSVG: "0%"}, {drawSVG: "100%"});

 

but unfortunately no.

 

 

I would like to line animate this logo, any troubleshooting guidance would be appreciated.

See the Pen grWOXW by Meds (@Meds) on CodePen

[PointC 8,599 Likes (Superhero)]

HI Meds86 

 

Welcome to the GreenSock forums.

 

There are a few problems to correct, but we can get you there.

 

1. You need to load TweenMax and the DrawSVG plugin. You can click the little gear icon in the JS panel and load your scripts. ...or the easiest thing to do is fork this GS demo which loads all the plugins for you.

 

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

 

2. I see in your CSS that you're trying to add a stroke to everything which can work, but you're targeting a class of .path rather than the paths in the SVG. You can target all of those like this:

#Layer_1 path  {
  stroke-width: 3px;
  stroke: red;
}

3. The last thing is the size of your SVG (93x93). Adding a 3px stroke on that is going to look pretty thick. I forked your pen and changed it to a 0.5px stroke so you can see that everything does indeed work, but probably not the result you were looking for.

 

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

 

You'll probably need to rework your SVG a bit to get what you want here. I'd recommend starting at a larger size when you do that. 

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

[Meds86 2 Likes (Newbie)]

That was a great help, thank you so much for that