Jump to content
Search Community

DrawSVGPlugin

| GreenSock
550192

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.

Demo

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.

Demos

  • Like 2
  • Thanks 2

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

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock
Go to products

User Feedback

Recommended Comments

Karma Blackshaw test

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 5
Link to comment
Share on other sites
Keppel test

Keppel 0 Likes (Newbie)

Posted

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.

Link to comment
Share on other sites
GreenSock test

GreenSock 19,676 Likes (Superhero)

Posted

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
GreenSock test

GreenSock 19,676 Likes (Superhero)

Posted

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
GreenSock test

GreenSock 19,676 Likes (Superhero)

Posted

@meerbex Our entire licensing model is based on the honor system and a simple number-of-developers pricing structure.

If your membership expires, nothing will change on your client websites. We don’t inject “phone home” scripts to verify your license status. Functionality doesn’t suddenly stop upon expiration. Inspect the code for yourself if you’d like to verify (that’s why we provide the raw source code). We treat others the way we’d want to be treated.

The only case where you'd need to renew to keep a valid membership is if you're continuing to sell a product that uses GSAP to multiple people (this requires an active Business Green membership). But again, we don't burn resources hunting down violators - we focus all our energy on building the best tools we can and supporting them better than any library out there. I hope you'll find the membership well worth the cost, and that it'll ultimately make you much more profitable. 
 

Happy tweening!

  • Like 1
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

×
×
  • Create New...