Jump to content
Search Community

SVG line animation

Meds86 test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

 

 

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

  • Solution

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
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.
×
×
  • Create New...