drawSVG with webpack

[alehkudrevich]

Hello. How can I use drawSVG with webpack?

I install gsap npm install gsap and import it import TweenMax from 'gsap'. Animations work perfect, but can't animate svg.

[jackdoyle]

DrawSVGPlugin is a membership benefit of Club GreenSock, thus it's not in the NPM package (otherwise, it'd make it free for anyone to download without signing up). When you sign up, you can download a zip that has the bonus plugins in it, and then you can add those to your project. Learn more (and sign up) at http://greensock.com/club/

[pr1ntr]

What if you did buy it? I import gsap from npm but since the drawsvg plugin doesn't come with it you have to add it from the downloaded package. How does one manage this?

[pr1ntr]

nevermind it just works lol, I was hiding the parent of my svg element. :P

[RobTiu]

Hi @pr1ntr and @jackdoyle I'm currently trying to include the drawsvg plugin in react but i haven't had any luck. Directly inserted DrawSVGPlugin.js into node_modules/gsap/src/uncompressed/plugins and tried to import it in my react code import DrawSVGPlugin from 'gsap';

this is what I'm trying to run using DrawSVNPlugin but nothing is happening. No stroke calculation happening on the console.

return new TimelineLite().to(target.find({ id: 'logo1' }), 6.5, {drawSVG:'50% 50%', ease:Bounce.easeOut})

Do I have to do anything in the webpack? Thought maybe to try adding an alias but same results :( resolve: { extensions: ['', '.js', '.jsx'], modules: [ 'client', 'node_modules', ], alias: { "DrawSVGPlugin": path.resolve(__dirname, 'gsap/src/uncompressed/plugins/DrawSVGPlugin'), } },

[pr1ntr]

as @jackdoyle said its not included in the npm package. So you have to just take the file out of your clubgreen package and import it somewhere.

In my case I put it in my app entry point js file. import './vendor/DrawSVGPlugin';

Looks like you should just include the file directly.

import DrawSVGPlugin from 'gsap'; implies that the default export of gsap is a that plugin.

[RobTiu]

Thank you so much @pr1ntr for the answer. I got it working using that way but I had to do something extra with webpack so that DrawSVGPlugin would be able to recognize gsap stuffs.

resolve: { root: path.resolve(__dirname), extensions: ['', '.js', '.jsx'], modules: [ 'client', 'node_modules', ], alias: { "TweenLite": "gsap/src/uncompressed/TweenLite", "TimelineLite": "gsap/src/uncompressed/TimelineLite", "TimelineMax": "gsap/src/uncompressed/TimelineMax", "TweenMax": "gsap/src/uncompressed/TweenMax", } },

It seemed like good practice to include third party scripts along with the npm packages. I'm still pretty new to react so I'm trying to learn the good practices too. Currently using the mern.io stack.

[RobTiu]

Should you actually include DrawSVGPlugin in the default gsap export. If so how would you go about doing that?

[pr1ntr]

i don't do anything like that. I have something called external in my webpack config:

external: {
    TweenLite: 'TweenLite'
}

I think that exposes it if its not already exposed. i usually do import 'gsap' before anything else in my entry point too.