Path won't draw

[Shinobi]

I don't understand why the path won't draw. What's wrong am I doing?

See the Pen RwWRExa?editors=0010 by rahul-247 (@rahul-247) on CodePen

[PointC]

You just need to upgrade to the latest version of DrawSVG.

See the Pen 5983f690c362a4e78945583150ba12f2 by PointC (@PointC) on CodePen

 

You should also use the new syntax.

gsap.from("#svg_13", { duration: 1, drawSVG: 0 });

More info

Happy tweening.

 

[Shinobi]

Didn't know that, Thanks PointC for the update.

 

BTW, I'm trying to do the same thing in Vuejs.

 

But it shows,  "export 'DrawSVGPlugin' was not found in 'gsap' and the animation doesn't work.

 

I imported it like this.

 

[PointC]

Sorry, I don't know anything about Vue. Maybe the installation guide can help.

https://greensock.com/docs/v3/Installation

[Shinobi]

Well, just read your comment somewhere, I didn't know that drawSVG plugin is for club members, that's because it's not showing in my node_modules directory. 

BTW, I found out a solution using strokeDashoffset in TimelineMax, works the same as drawSVG.

But I know there are a lot of pretty powerful things in drawSVG and other plugins, I just had a glance of it.

 

Thanks for the help, Man! .  

 

[PointC]

Yeah, you can make it happen without the plugin and it may appear to work correctly, but DrawSVG solves several browser bugs and inconsistencies for you. It's only one of many plugins you receive as Club GreenSock perks so definitely take a look at the Club when you get a chance. It pays for itself quickly. 

https://greensock.com/club/

 

Happy tweening.

[ZachSaucier]

Note that we also recommend using the GSAP 3 syntax. That way you don't have to import a bunch of stuff for the v2 version:

import { gsap } from 'gsap'; // Simple!