Jump to content
GreenSock

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

SVG line animation

Recommended Posts

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.

 

https://codepen.io/Meds/pen/grWOXW

 

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

Share this post


Link to post
Share on other sites

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.

:)

  • Like 2

Share this post


Link to post
Share on other sites

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

 

:)

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×