Jump to content

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

| GreenSock

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

Watch the video

The video below illustrates the many ways DrawSVGPlugin can be used and will get you up and running fast. Note that it uses GSAP 2 formatting.


Click through the demo below to see the various ways you can provide values to DrawSVGPlugin.

See the Pen DrawSVGPlugin Values: carl click next by GreenSock (@GreenSock) on CodePen.

Fully integrated

All the features you love about GSAP (runtime controls, callbacks, eases, overwrite management, nesting) will work with your fancy SVG animations.

See the Pen All Shape Types by GreenSock (@GreenSock) on CodePen.

More details

For more detailed usage notes please consult the DrawSVGPlugin API documentation. The docs are loaded with tons of info that will help you get the most out of DrawSVGPlugin.

Get your hands on DrawSVGPlugin

DrawSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. To learn how to include DrawSVGPlugin into your project, see the GSAP install docs.

Try DrawSVGPlugin for free on CodePen! There's a special [fully-functional] version of DrawSVGPlugin that we link to in our DrawSVGPlugin CodePens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin. CodePen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.


  • Like 1
  • Thanks 2

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock

User Feedback

Recommended Comments

Good day GSAP! I have a problem to which I found this as a possible solution, unfortunately, I am unable to find the location of the DrawSVG Plugin within the gsap-member folder or even at the gsap-bonus/package folder. 

  • Like 4
Link to comment
Share on other sites
2 hours ago, Keppel said:

Hello GSAP! I just want to ask about DrawSVGPlugin if it's applicable for the wordpress? I'm currently looking for scribble animation as it needed for the website to have it.

Absolutely, @Keppel, you can use DrawSVGPlugin on a WordPress site. It's just a JavaScript file, so it can work on literally any web page. There are no dependencies aside from GSAP. 

Link to comment
Share on other sites
On 2/26/2020 at 4:33 AM, Karma Blackshaw said:

unfortunately, I am unable to find the location of the DrawSVG Plugin within the gsap-member folder or even at the gsap-bonus/package folder. 

DrawSVGPlugin is only available to Club GreenSock members. Once you sign up, you can download it from your account dashboard or the private NPM repository. 

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