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>