Jump to content
Search Community

Using DrawSVG Plugin

sgonzal test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I want to start using the DrawSVG plugin on my pages. I downloaded the latest version of GSAP and placed the files where they need to be. 


What do I need to do to my html page in order to start playing and experimenting with the basic elements of DrawSVG?



Link to comment
Share on other sites

Hello and welcome to Greensock forum,


You can read a very basic implementation of the DrawSVG plugin in a tutorial I wrote, it is very basic but I think it is a good place to start, it also includes a codepen post that you can fork and experiment upon that.


You can find it here: http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/

  • Like 1
Link to comment
Share on other sites

Thanks Diaco,


I really appreciate the quick response. I think the nightlycoding link you sent is closer to what I was looking for. The other stuff I have already looked at, but they are not useful to me until I set up a working environment. Which was initial question. "What do I need to do to my html page in order to start playing and experimenting with the basic elements of DrawSVG?" 


The nightlycoding link is good for me to get started, but it doesn't state if I need to link to the latest GSAP files, where I place my CSS code, and where do I place my js code.


Kind regards!

Link to comment
Share on other sites

Hi Sgonzal,


Thanks for your interest in learning how to use DrawSVGPlugin. 

We provide the CodePen demos so that you can see exactly how it works prior to purchasing.


To use it in your page you really just need TweenMax.js and DrawSVGPlugin.js loaded.


Assuming all your gsap files are in js/gsap, all you need to do in your html is:

<script src="js/gsap/TweenMax.js"></script>
<script src="js/gsap/plugins/DrawSVGPlugin.js"></script>

Where you load your css from doesn't really matter, and you can also place your gsap files in any directory that you choose. 


I've attached a very basic set of files that have a simple GSAP TimelineMax animation maybe that will help you with some of the basics of how to set up your local files. 


Incase it wasn't clear, DrawSVGPlugin is a bonus plugin for Club GreenSock members. You only get it when you become a member: http://www.greensock.com/club. For this reason, my zip does not use DrawSVGPlugin.


Let us know if you have any other questions.




  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Hello my friends.

I checked this topic:


and this one:


but I cannot figure out how to draw a simple SVG animation.

I attached my print screens (with out plugins of course) and asking you to help me.

<SVG polyline> and all code are from first link in my massage.


What I am doing wrong?


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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...