Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aleksei

Call a function after external async TweenMax.min.js is loaded

Recommended Posts

Hi!

I would like to call animation functions only after the external GSAP file is loaded. I could place the animation functions after the link to GSAP file like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
    //my animations
</script>

...but I want to load TweenMax.min.js asynchronously and that's the problem:

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

I've googled it and found some kind of solution. The idea is to have a global variable created by the the external script and check whether it exists or not. If it exists, then the external JS is loaded. I found the solution here.

 

So my question is: does TweenMax.min.js create any global variables or objects or whatever I can check the existence of?

 

Thanks in advance!

Link to post
Share on other sites

Everything that GSAP uses will be located on this object...

window.com.greensock

But you could just check if TweenLite exists if that's the only GSAP file you're loading...

if (TweenLite) {
  // Do something
}

.

  • Like 2
Link to post
Share on other sites

Hmm... if TweenMax is not loaded then this construction returns an error which look like this:

 

ea0d1fdbf62345fc8365dfcb931cf3d4.jpeg

 

Here is what I'm doing:

function TweenMaxLoaded() {
    if (TweenMax) { //generates JS error which doesn't allow to execute any other scripts on the page
        console.log ("yes");
        return true;
    } else {
        console.log ("no"); // doesn't show because 
        return false;
    }
}
Link to post
Share on other sites

I think that's because you didn't define any scope/context. Have you tried one of these?:

if (window.TweenMax) { ...
//or
if ("TweenMax" in window) { ..
Link to post
Share on other sites

yes! this works. Thank you!

And sorry for these primitive questions — I'm newbie in JS.

 

And one more question:

if I place this function inside of JS file like this, it doesn't work again:

<script src="app.js"></script>

It only works from when placed directly in HTML <script> tag.

What's the reason for that?

Link to post
Share on other sites

Are you getting an error message? Or is it just evaluating to false? I wonder if you're just placing your <script src="app.js"> before you ever load TweenMax. You wouldn't need this kind of "did it load yet" sensing if don't load it async - I'm curious why you're going that route. Also, you'd need to add logic to keep checking - do you have that? The code you're sharing only checks it once. I'd help a LOT if you could share a super simple codepen demo that illustrates the problem you're having so that we can troubleshoot more effectively. Would you mind creating one? See https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ for help doing that. 

  • Like 1
Link to post
Share on other sites

Sorry for the confusion. My last post was the result of my own mistake. But I fixed it already now it works. But I'll explain what I was doing.

 

I want to load TweenMax asynchronously, so that other JS functions don't have to wait until the GSAP will be loaded. I have construction like this:

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

Inside app.js I will have a lot of different functions. Not only TweenMax animations. This file looks like this now and it works:

var loadtimer;
function TweenMaxLoaded() {
	clearInterval(loadtimer);
	if (window.TweenMax) {
		startAnimations();
	} else {
		loadtimer = setInterval(TweenMaxLoaded, 100);
	}
}

// a lot of other stuff including TweenMax

The error described in the previous post was caused by the animation functions which use TweenMax. I was declaring and executing those functions without waiting for TweenMaxLoaded function. But the TweenMaxLoaded function itself was working properly.

 

Thanks again! Now even with slow 3G network I can start executing simple functions without waiting for animation scripts  8-)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×