Loading gsap on a cargo.site site

[Ethan Klein]

Hi. Greensock Shockingly Green member here.

Been a Greensock user for years and rarely have troubles.

I'm currently struggling to load gsap at all within a cargo.site (website design/building tool) site. 

My client wants to use cargo... and.. looks good so far by me... but... when attempting to load gsap so i can add some animations i get the following error: 

 

Here's the first line of error (in case other users are searching for it,  Uncaught Error: Mismatched anonymous define() module:

 

Here's a screengrab of the entire error:

 

I'm loading the gsap js file via the cdn like so: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

 

I don't have access to the cargo server so i can't host files (other than images) but i've tried to link to various versions of gsap js files (esm, umd) that i'm hosting on a personal server. When I do this i get other errors like this one (for the esm version) 😞

 

Any help would be much appreciated! Thanks! 

 

Here's a link to the site to see it in action (open dev tools console)

https://wunderfaire.cargo.site/

 

Ethan

 

 

 

Edited October 24, 2020 by Ethan Klein
adding details

[ZachSaucier]

Hey Ethan and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

This seems a whole lot more like a cargo.site question than a GSAP question. You should ask them which format is best for external libraries (modules or non-modules) then use that version. I am completely unaware of how they would like you to import external libraries so it'd be good to ask them how to import GSAP as well. Most likely it's just a question of where to put the .min.js file and how to reference it  

 

Feel free to post back here if you have a question specific to GSAP or figure out a solution.

[Ethan Klein]

Thanks @ZachSaucier

It turns out that Cargo uses requireJS and it's necessary to use it when loading it external libraries like gsap.

 

<script>

    require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'], function (GS) {

      console.log('GreenSock is here', GS);

    });

</script>

 

My problem now is when using MorphSVGPlugin.

 

The first time i load the site... i get a MorphSVGPlugin is not defined error. If i do a refresh then MorphSVGPlugin is defined and my javascript runs fine.  I can reproduce the issue by opening a new tab in my browser and loading my site. When i do that: MorphSVGPlugin is not defined. If i do a refresh, MorphSVGPlugin is defined and everything runs smooth.    

 

I'm also loading in the MorphSVGPlugin (from a personal server) using requireJS. Below you'll see how i'm referencing my javascript files. I'd be delighted if anyone here could point out where my strategy is incorrect! I call the "wunder.libraryLoaded()" function when each of the dependencies get loaded. I then call a function in my main.js that uses gsap and MorphSVGPlugin when all the dependencies (greenSock, ScrollTrigger and MorphSVGPlugin) have been loaded.

 

<script src="https://www.xxxxx.com/xxxxx/main.js"></script>

 

<script> require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'], function (GS) {

console.log('GreenSock is here', GS);

wunder.libraryLoaded('greenSock');

});

</script>

 

<script> require(['https://www.xxxxx.com/xxxxx/ScrollTrigger.min.js'], function (ScrollTrigger) {

console.log('ScrollTrigger: ', ScrollTrigger);

wunder.libraryLoaded('scrollTrigger');

});

</script>

 

<script> require(['https://www.xxxxx.com/xxxxx/MorphSVGPlugin.min.js'], function (MorphSVGPlugin) {

console.log('MorphSVGPlugin: ', MorphSVGPlugin);

wunder.libraryLoaded('morphSVGPlugin');

});

</script>

 

Thanks for any insights!

 

Ethan 

 

 

 

 

 

 

[ZachSaucier]

12 hours ago, Ethan Klein said:

The first time i load the site... i get a MorphSVGPlugin is not defined error. If i do a refresh then MorphSVGPlugin is defined and my javascript runs fine.

That's a very weird error. I've never heard of something like that before. It's definitely not related to GSAP specifically. Again, I'd ask the cargo.site support about it.

[Ethan Klein]

Thanks for the feedback @ZachSaucier... The support people at Cargo don't officially support anything in the "custom html" section so it seems i'm on my own. Is there any way i could include MorphSVGPlugin and ScrollTrigger into single file with gsap core? Or... use something like gsap.registerPlugin() to ensure that

the plugins are loaded (i've tried this to no avail). Here's the error message I get... which shows that the MorphSVGPlugin has, in fact, been loaded at the time that my script calls it... but... but still the error message says that MorphSVGPlugin is not defined. 

 

 

 

As soon as i do a hard refresh... everything works.

 

Again... any help or even recommendations on where to look would be appreciated... maybe i should be using one of the different versions of the plugins (umd, esm) when using requireJS and modules? 

 

Currently i'm attempting every variant detailed on this page... so far with no luck. Still a bit fuzzy on how to create modules and when it's necessary: https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger,morphSVG#esModules

 

Thanks so much!

Ethan

 

[ZachSaucier]

I may know what it is: it looks like you're loading the non-modules version of the GSAP core but loading the modules version of ScrollTrigger and MorphSVG. Try loading the non-modules (UMD) version of MorphSVG and ScrollTrigger instead. Also make sure that you register the plugins. 

 

I'm not sure why it would work after a refresh though.

[Ethan Klein]

Thanks again for the response @ZachSaucier !! I really appreciate you taking the time! I followed your advice and am now loading the UMD versions of MorphSVG and ScrollTrigger while still loading the CDN version of GSAP core. Unfortunately i'm still getting the same error. Here's what my script tags look like: 

 

 

<!-- This is a reference to my main js file... which is NOT in module form -->

<script src="https://www.xxxxxxx.org/xxxx/main.js"></script>

 

<script> require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'], function (GS) {

console.log('GreenSock is here', GS);

wunder.libraryLoaded();

});

</script>

 

<script> require(['https://www.xxxxxxx.org/xxxx/gsap-shockingly-green/umd/MorphSVGPlugin.js'], function (MorphSVGPlugin) {

console.log('MorphSVGPlugin: ', MorphSVGPlugin);

wunder.libraryLoaded();

});

</script>

 

<script> require(['https://www.xxxxxxx.org/xxxx/gsap-shockingly-green/umd/ScrollTrigger.js'], function (ScrollTrigger) {

console.log('ScrollTrigger: ', ScrollTrigger);

wunder.libraryLoaded();

});

</script>

 

Here's what the error message looks like: 

 

 

You can see that the 3 gsap libraries all get loaded successfully. 

My code waits for all three libraries to load, then begins. 

The red error above is when i call gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

 

Here's my code that waits for the 3 libraries to load... then calls gsap.registerPlugin:

 

libraryLoaded: function(library) {

wunder.libraryCount +=1;

if (wunder.libraryCount === 3) {

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

wunder.setup();

wunder.resizeListener();

}

},

 

Again. The issue is intermittent but happens everytime i open a new tab and load the site in Chrome and Firefox (Safari seems to always work). 

 

If i just keep refreshing the site in chrome (no hard refresh) I'll see the issue 1 out of 4 times... Which makes me think it could be some kind of race condition? 

 

Thanks for any help or further direction setting. 

 

 

 

 

 

 

[ZachSaucier]

It looks like the plugins are being loaded before GSAP itself. It also looks like the reference that you have to GSAP and the plugins is limited to the functions themselves. I would try to make sure GSAP loads first and then register the plugin inside of the function/callback for each plugin.

 

Alternatively you could try saving the references to the global scope. Like 

<script> require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'], function (GS) {
window.gsap = GS;
wunder.libraryLoaded();
});
</script>
 
<script> require(['https://www.xxxxxxx.org/xxxx/gsap-shockingly-green/umd/MorphSVGPlugin.js'], function (MorphSVGPlugin) {
window.MorphSVGPlugin = MorphSVGPlugin;
wunder.libraryLoaded();
});
</script>
 
<script> require(['https://www.xxxxxxx.org/xxxx/gsap-shockingly-green/umd/ScrollTrigger.js'], function (ScrollTrigger) {
window.ScrollTrigger = ScrollTrigger;
wunder.libraryLoaded();
});
</script>

These are just guesses. Again, this is something that cargo.site should be helping with.

[Ethan Klein]

@ZachSaucier First off, thanks for all the support on this!! MUCH APPRECIATED!!!

I ended up getting everything working by nesting  my requireJS calls... to ensure that gsap was loaded before the 2 plugins. 

<script> 
  require(['https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'], function (gsap) {
    console.log('GreenSock is here hey: ', gsap);
    wunder.libraryLoaded();

    require(['https://www.xxxxxxx.org/xxxx/wunderfaire/gsap-shockingly-green/umd/MorphSVGPlugin.js'], function (MorphSVGPlugin) {   
      console.log('MorphSVGPlugin: ', MorphSVGPlugin);
      wunder.libraryLoaded();
    });

    require(['https://www.xxxxxxx.org/xxxx/wunderfaire/gsap-shockingly-green/umd/ScrollTrigger.js'], function (ScrollTrigger) {   
      console.log('ScrollTrigger: ', ScrollTrigger);
      wunder.libraryLoaded();
    });
  });
</script>