DrawSVGPlugin working only in development

[Femme Fatale Studio 0 Likes (Newbie)]

Hi, I am working on a project using the DrawSVGPlugin, and using native JS that's compiled with gulp and webpack.

I'm importing gsap and the plugin as such : 

import gsap, { TimelineLite} from 'gsap';
import * as drawSVG from '../gsap-extras/DrawSVGPlugin.js';

and the registering the plugin in the constructor of my component's class using : 

gsap.registerPlugin(drawSVG);

Then, I simply want to test the plugin doing something like : 

new TimelineLite().set([this.anchorCircles, this.anchorFillCircles], {
	drawSVG: 0
});

This is actually working as long my gulp server is watching the changes and displaying the development JS, but after running a build,

I'm able to log the drawSVG imported, but the TimeLine().set wont have any effect on my elements.

 

I can't provide my gulp config if this is needed, but may be there's something simpler that I am missing here..

Thank you

 

EDIT:

 // Finally found that the way the webpack was configured prevented the minified plugin to work. I had to change the webpack babili plugin to webpack minify plugin !

Edited July 2, 2020 by Femme Fatale Studio
Found solution

[ZachSaucier 7,163 Likes (Superhero)]

Hey Femme, welcome to the GreenSock forums! I'm glad you got logged in.

 

We recommend using the GSAP Install Helper until you get comfortable importing GSAP. Modifying the DrawSVG path to yours, I think this should work:

import { gsap } from "gsap";
import { DrawSVGPlugin } from "../gsap-extras/DrawSVGPlugin.js";

gsap.registerPlugin(DrawSVGPlugin);

You don't need any of the Lite/Max stuff because that's from an old version of GSAP. We recommend using the newer, sleeker, and more condensed GSAP 3 API. For more details see the GSAP 3 migration guide:

 

Happy tweening