Magento 2 / Require JS is trying to load a file from a TweenLite CDN script

Question

We're using TweenLite in a Magento 2 webshop for some animations. I've added the scripts in a separate module in the way Greensock recommends, like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>

I've added these script tags in a template file, which will be loaded by Magento through a module. When I check the webshop, the template file is loaded and the scripts are visible in the source code. But when I check the console, it shows the following errors:

In particular, the second error is a bit weird. I'm only loading the TweenLite.min.js through the script tag from the CDN, but now it also tries to load a TweenLite.js from the static files.

Apparently, the CSSPlugin and/or EasePack files are trying to load the TweenLite.js file. When I remove those two, it doesn't try loading the TweenLite.js file.

Does anyone know the reason for trying to get the TweenLite.js file from the static files? And is there a solution for this, like loading the files through RequireJS or something?

Answer 1

The underlying problem here are dependencies. Since you load the CSS Plugin prior before TweenLite, the CSS Plugin will try to load TweenLite for you. It does this by detecting if RequireJS is available or not.

But the best solution here is to embrace Magentos' own JavaScript / requirejs loading tools. So first add the paths to the requirejs-config.js of your module:

var config = {
  "paths": {
    "TweenLite": "//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min",
    "TweenLite.EasePack": "//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min",
    "TweenLite.CSSPlugin": "//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min"
  }
};

And then in your .phtml (or other location where you need TweenLite) add them as dependencies:

<script type="text/javascript">
  require([
    "TweenLite",
    "TweenLite.EasePack",
    "TweenLite.CSSPlugin"
  ], function () {

    // Dependencies are now loaded, it's now safe to use TweenLite ...

  });
</script>