GSAP ES module from CDN

[Ahmed Khalil]

Hello,

I'm using GSAP in an HTML file and can't use `npm` and i want to make sure the script is loaded before i start using it 

so my current implementation looks like this 

 

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

<script type="module">

// import my stuff here

console.log(gsap);

// start using GSAP

</script>

I have to use async or defer while loading all external dependencies which means in slow connections my script will run in parallel while GSAP is still loading (already tested and it gives error that GSAP is not defined)

 

is there a way to hold my script until GSAP is loaded? I tried: 

import {gsap} from 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js';

 but it didn't work, any ideas? 

Thank you

 

[OSUblake]

With that setup, you might be better to off using the ES Modules hosted by CDNs like Skypack or JSDelivr. Skypack even has imports for production optimized code.

 

<script type="module">

import { gsap } from "https://cdn.skypack.dev/gsap";

console.log(gsap);

// start using GSAP

</script>

 

[Ahmed Khalil]

1 hour ago, OSUblake said:

With that setup, you might be better to off using the ES Modules hosted by CDNs like Skypack or JSDelivr. Skypack even has imports for production optimized code.

 

<script type="module">

import { gsap } from "https://cdn.skypack.dev/gsap";

console.log(gsap);

// start using GSAP

</script>

 

Thank you so much, that works 

[Ahmed Khalil]

for anyone who might face this issue, here is a script to load GSAP from the original CDN parallel with other scripts and wait for it to be ready on the page. This is for use with pure HTML implementation when you don't have control over the entire page (rare)

 

    <script>
      function loadScripts(scripts) {
        const promises = scripts.map((script) => {
          new Promise(function (resolve, reject) {
            var s;
            s = document.createElement("script");
            if (script.type === "module") s.type = script.type;
            s.src = script.src;
            s.onload = resolve;
            s.onerror = reject;
            s.async = "async";
            document.head.appendChild(s);
          });
        });

        return promises;
      }

      async function LoadAll() {
        const scripts = [
          {
            type: "",
            src: "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js",
          },
          {
            type: "module",
            src: "https://other-script.js",
          },
        ];
        const scriptPromises = loadScripts(scripts);

        await Promise.all(scriptPromises);
      }

      async function gsapReady() {
        return new Promise(function (resolve, reject) {
          if (window.gsap) {
            return resolve();
          } else {
            setTimeout(async () => {
              return resolve(gsapReady());
            }, 1);
          }
        });
      }

      (async () => {
        await LoadAll();
        await gsapReady();
        console.log(gsap);
      })();
    </script>