Share Posted June 29, 2016 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 Link to comment Share on other sites More sharing options...
Share Posted June 30, 2016 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 30, 2016 That was a great help, thank you so much for that 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now