SVG draw inline animation

[Ljanmi]

Hi, is it possible to make the same responsive animation using GSAP with plugin? 

See the Pen KweyOj by Ljanmi (@Ljanmi) on CodePen

[Carl]

Absolutely.

 

Please read about DrawSVGPlugin here: http://greensock.com/drawSVG

Experiment here: http://codepen.io/collection/DYmKKD/

[Ljanmi]

Ok, I just need to pay 50$ for Simply Green membership and Ill get the plugin to use it on my website? I need it for onetime use, so I guess I dont need commercial license? Membership is per year, what happens with my plugin and license of use after a year expires? Will I loose license to use SVG Draw plugin?

[Carl]

Yes, DrawSVGPlugin comes with the $50 Simply Green membership.

As long as you are not using it in a product that you re-sell to multiple people OR a product uses micro-transactions, you do not need a license.

The $50 Simply Green plan should be fine for you (no license).

 

You can use the files you purchase today for the rest of your life. Nothing will happen to those files after a year. They will continue to work. Nothing to worry about.

 

You have access to updates to the tools you purchased AND any new tools we add to that plan for 1 year. 

If after 1 year you need new tools or updates, you will need to renew your membership. 

 

Thanks for showing interest in our products and for the questions.

If you need any more help, just let us know.

 

Best,

 

Carl

[Ljanmi]

Do I get a bit of help if needed for using it here on forum?

[Carl]

A good way to see what type of help we offer is to read some of the forums posts.

I'm confident you will be impressed with how willing folks are to provide solutions.  

 

It is our goal to help folks not only use the tools properly, but enjoy using the tools. 

In order to do that the best for everyone our support is aimed very strictly on helping you with the GSAP API.

 

The things we avoid:

• building full projects from scratch. If you come here and say "i just saw this award-winning site, please teach me how to do it", we are going to shy away
• digging into a large project which would take us hours to decipher
• showing you how to do things with jQuery, Angular, or basic HTML and CSS
• troubleshooting anything that isn't testable
  • files hosted on a site that we can not modify and test.
  • more than 3 lines of code pasted into a forums post

To get around that last point, just use continue to use CodePen (as you already have). It makes us super happy:)

 

As long as you make some effort to show that you are trying to learn we will do our best to help. 

 

 

here is a little nudge: http://codepen.io/GreenSock/pen/PwaQGw?editors=011

[Jonathan]

It's amazing how few lines of code you have to write for the GSAP drawSVGPlugin. Versus all the CSS animation, @keyframes, rules, and properties you have to write to do the same effect. That is so awesome Carl

[Ljanmi]

@Carl 

 

I am sold    In the next couple of days I'll join the club. It is fantastic how it performs in IE which is the main reason I came to greensock. I read a lot about in in the artical on CSS tricks. Just one thing, in IE something is wrong with the VISA draw SVG size(a part of it is cut and doesn't show) - 

See the Pen PwaQGw?editors=011 by GreenSock (@GreenSock) on CodePen

 

Thanks Carl, you are the man!

[Diaco]

Hi Ljanmi 

 

your SVG structure/parameters is cause of that issue in IE , pls check your SVG structure ( viewBox , path , ...ect )

 

pls check this out : 

See the Pen MYXXjv by MAW (@MAW) on CodePen

[Ljanmi]

Aha, I see, I needed to brake every line into separate path. Great, the main thing is that SVG inline draw can easily be done. Thanks Diaco.AW for such a fast reply. Excellent support here on Greensock