DrawSVG not functioning and breaking other gsap scripts

[TurdFerguson]

Hello everyone.  I am fairly new to this and not great at JS (still learning).  I have a setup that I created using ScrollTrigger and DrawSVG that works perfectly fine in Codepen (linked), but then dies in the production environment.  I read everywhere about installing DrawSVG via npm, but I have no idea how to accomplish that and I don't even know if I can inside of BigCommerce.  I had to place the JS inside of the HTML in order to get it to read (appears to be a BigCommerce thing).  I also tried using each folder in the gsap download to get it to pull in (esm, src, umd).  I am lost as to how to get DrawSVG to function.  If I remove the ( gsap.registerPlugin(DrawSVGPlugin);) it works perfect, minus the DrawSVG aspect.

 

Here is the production page that I am working on: https://sxthelement.com/ektest/

 

The code for the page is attached as well.

 

Thank you for the help!

ek1pro-htmlPlusJS.html

See the Pen BaRdWJx by chase-field (@chase-field) on CodePen

[GreenSock]

It looks like that's because you're using the ES Module directly in a <script> tag that doesn't have type="module". It'd be much better to just link to the proper minified file which is in /minified/DrawSVGPlugin.min.js instead of /esm/DrawSVGPlugin.js

 

Does that clear things up? 

 

Thanks for being a Club GreenSock member!

[TurdFerguson]

Thank you Jack.  I just tried that, but it broke as soon as I added DrawSVGPlugin to gsap.registerPlugin().

 

Is there something with the authentication that I'm missing?  Again, I can't really do much with this site locally, so using npm may be out of the question (unless I'm just illiterate to it).  I'm using CrossFTP to use webdav access if that helps at all when adding these plugins.

[ZachSaucier]

11 minutes ago, TurdFerguson said:

Is there something with the authentication that I'm missing?

No, there's no client-side authentication for GSAP files.

 

Currently your site is giving a 404 for the DrawSVG file (the current URL it's looking at is /ektest/content/gsap-simply-green/esm/DrawSVGPlugin.js which I found using the Network tab in the dev tools). I'm guessing the path is wrong. But you also want to be using the minified, non-modules version, not the ESM version as Jack said.

[GreenSock]

Yep, like Zach said, the page at the URL you posted originally is still pointed at the same [incorrect] file. It doesn't match your screenshot (which looks correct to me). 

 

I also noticed you're loading ScrollMagic and ScrollTrigger. You shouldn't need ScrollMagic at all (that's not a GreenSock product, and ScrollTrigger does the same thing plus a lot more). 

[TurdFerguson]

1 hour ago, ZachSaucier said:

Currently your site is giving a 404 for the DrawSVG file (the current URL it's looking at is /ektest/content/gsap-simply-green/esm/DrawSVGPlugin.js which I found using the Network tab in the dev tools). I'm guessing the path is wrong. But you also want to be using the minified, non-modules version, not the ESM version as Jack said.

Good call Zach.  I completely missed the URL issue.  Thank you for catching that.

 

All good and working now with the minified and the URL.  Thank you for all of your help!

 

 

 

17 minutes ago, GreenSock said:

I also noticed you're loading ScrollMagic and ScrollTrigger. You shouldn't need ScrollMagic at all (that's not a GreenSock product, and ScrollTrigger does the same thing plus a lot more). 

Yea, that was from an old project.  I need to remove that from the template since I've been upgrading to GSAP.