DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG
<ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the
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.
Since DrawSVGPlugin is part of GSAP, you can use it in any TweenLite, TweenMax, TimelineLite, or TimelineMax animation. All the features you love about GSAP (runtime controls, callbacks, eases, overwrite management, nesting) will work with your fancy SVG animations.
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. 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.