Jump to content

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

Equivalent approach of drawing an svg without the DrawSvgPlugin

Recommended Posts



I wanted to animate my logo an my website using the gsap object. I coded a demo using the DrawSvgPlugin which is available in Codepen. Since I am not a club member I can´t access it and wanted to ask what would be the workaround here to achieve the same effect.

Here is the same appraoch using the DrawSVGPlugin: 

See the Pen ZEBNWgx by Preefix99 (@Preefix99) on CodePen


I appreciate any inputs. Thanks in advance.

See the Pen eYBaBQy by Preefix99 (@Preefix99) on CodePen

Link to post
Share on other sites

Hey Preefix.


Providing free alternatives to our paid products doesn't make much business sense for us. It would remove one of the primary reasons for joining Club GreenSock, the very thing that enables ongoing support and development.  To understand why this is GreenSock's model, read our "Why license?" post.


Keep in mind that a Club GreenSock membership also gets you access to all of the other super helpful Club GreenSock plugins. Usually people find that a membership pays for itself in a matter of days. Also keep in mind that if you're unhappy with your purchase we offer a money-back guarantee.

  • Like 5
Link to post
Share on other sites

Just FYI. You can make this happen without DrawSVG by getting the total length, but DrawSVG solves a lot of browser inconsistencies and bugs for you.


  1. Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
  2. Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>)
  3. Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
  4. Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times.
  5. Some browsers render artifacts if dash is 0.
  6. When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust.
  7. A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't.
  8. You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc.
  9. IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly.

My advice would be the same as @ZachSaucier's advice. Join Club GreenSock and save a bunch of time and frustration. 


Happy tweening.



  • Like 2
Link to post
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.