Using DrawSVG Plugin

[sgonzal]

Hello,

 

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?

 

thanks

[Michael71]

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/

[Diaco]

Hi sgonzal 

 

you can find DrawSVG plugin starting codepens here : http://codepen.io/collection/DYmKKD/

 

DrawSVG Doc. : http://greensock.com/docs/#/HTML5/Plugins/DrawSVGPlugin/

 

and don't forget that DrawSVGPlugin is a bonus plugin for all Club GreenSock members : http://greensock.com/club/

[sgonzal]

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!

[Carl]

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.

 

 

basic-simplified.zip

[sgonzal]

I understand now, thanks. I was wondering why it wasn't working.

[sergey.melentyev]

Hello my friends.

I checked this topic:

http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/

and this one:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/

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?

Archive.zip

[sergey.melentyev]

I missed "});" at the end of main.js file.

Every thing is fine!