Jump to content
Search Community

How to check if a tween in a function is completed

_d3CipH3R_ test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All,

 

I'm currently having a problem with executing some code correctly.

 

Here's my function that's called to create a fade in effect:

function AnimationFadeIn()
{
    var fadeInDivision_1 = document.getElementById('show');
    var fadeInDivision_2 = document.getElementById('output');
    fader.to([fadeInDivision_1, fadeInDivision_2], 1, {opacity: 1});
}

A fade out effect:

function AnimationFadeOut()
{
    var fadeInDivision_1 = document.getElementById('show');
    var fadeInDivision_2 = document.getElementById('output');
    fader.to([fadeInDivision_1, fadeInDivision_2], 1, {opacity: 0});
}

Now, my web application uses Ajax for server interaction. So each time the user clicks a button, the process() function is executed:

function process()
{
    AnimationFadeOut();

        if (xmlHttp.readyState === 4 || xmlHttp.readyState === 0)
        {
            htmlText = encodeURIComponent(document.getElementById("htmlFile").value);

            xmlHttp.open("GET", "ServerExecute.php?text=" + htmlText, true);

            xmlHttp.onreadystatechange = handleServerResponse;

            AnimationFadeIn();

            xmlHttp.send(null);
        }
        else
        {
            setTimeout('process()', 1000);
        }
}

My problem here is that the if statement executes before the fader tween in AnimationFadeOut() function is complete.

Is there any way I can check if fader in AnimationFadeOut() function is completed, before executing the if statement?

Link to comment
Share on other sites

Not so sure I understand entirely, but you can also put an onComplete callback on the fade out animation that will trigger the process() function

fader.to([fadeInDivision_1, fadeInDivision_2], 1, {opacity: 0, onComplete:process});
  • Like 2
Link to comment
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.
×
×
  • Create New...