Get GSAP

Version: 1.19.0 updated 2016-07-18

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        See the Pen DrawSVGPlugin Animation by GreenSock (@GreenSock) on CodePen.

        DrawSVGPlugin

        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.

        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

        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.

        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.

        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.

        Help support GreenSock by becoming a member

        Join Club GreenSock