How do I submit a form after the animation is completed?

[Bevi87]

I want to submit the form after the animation is completed.

 

<form name="myForm" method="post" action="quiz.php" input-type="image">
            <?php
            if ($_SESSION['answer1'])
            {
                ?>
                <table>   
                    <tr> 
                        <td><img src="<?php echo $picChosen1; ?>" width="50" height="50"></td>
                    </tr>
                </table>  
                <?php
            }
            elseif ($_SESSION['answer2'])
            {
                ?>
                <table>   
                    <tr> 
                        <td><img src="<?php echo $picChosen1; ?>" width="50" height="50"></td>
                        <td><img src="<?php echo $picChosen2; ?>" width="50" height="50"></td>
                    </tr>
                </table>  
                <?php
            }
            ?>
            <br>
            <h2 id="leftToTheRight"><?php echo $status; ?></h2>
            <br>
            <h2 id="rightToTheLeft"><?php echo $question; ?></h2>
            <br>
            <table>   
                <tr>          
                    <td width="300"><button onclick="runAnimation()" type="submit" id="submitButton" class="unstyled-button imageButton" name="answer" value="1"><img src="<?php echo $picture; ?>" width="300" height="400"" id="rotateImage" alt="Left picture"></button></td>
                    <td width="300"><button type="submit" id="submitButton" class="unstyled-button imageButton2" name="answer" value="2"><img src="<?php echo $picture2; ?>" width="300" height="400" id="rotateImage" alt="Right picture"></button></td>
                </tr>
            </table>
        </form>

 

function runAnimation()
{
    gsap.to(".imageButton2",
            {
                duration: 2,
                y: -100,
                autoAlpha: 0
                        // rotation: 360,
            });
    gsap.to(".imageButton",
            {

                autoAlpha: 0
                        // rotation: 360,
            });
}

 

[ZachSaucier]

Hey Bevi and welcome to the GreenSock forums!

 

Usually this is done using the onComplete parameter:

function runAnimation() {
  var tl = gsap.timeline({onComplete: submitFunction});
  tl.to(".imageButton2", {
    duration: 2,
    y: -100,
    autoAlpha: 0
    // rotation: 360,
  }, 0);
  tl.to(".imageButton", {
    autoAlpha: 0
    // rotation: 360,
  }, 0);
}

 

Alternatively, you could use GSAP's .then() method:

function runAnimation() {
  var tl = gsap.timeline();
  tl.to(".imageButton2", {
    duration: 2,
    y: -100,
    autoAlpha: 0
    // rotation: 360,
  }, 0)
  .to(".imageButton", {
    autoAlpha: 0
    // rotation: 360,
  }, 0)
  .then(submitFunction);
}

 

[Bevi87]

Thanks for reply.
Can you please clarify what do I have to put as submitFunction?

 

My form gets submitted by this line of code:

<td width="300"><button onclick="runAnimation()" type="submit" id="submitButton" class="unstyled-button imageButton" name="answer" value="1"><img src="<?php echo $picture; ?>" width="300" height="400"" id="rotateImage" alt="Left picture"></button></td>
                    

 

[ZachSaucier]

2 hours ago, Bevi87 said:

Can you please clarify what do I have to put as submitFunction?

Whatever you would normally use in JS to submit the function. Often times it's something like

const form = document.querySelector("form"); // select your form somehow
form.submit();

Putting it in its own function makes it a little big cleaner and easier to use with event listeners. You may or may not need to preventDefault on the event for the button click as well so that it doesn't click immediately. 

[Bevi87]

 

Quote

const form = document.querySelector("form"); // select your form somehow
form.submit();

Whatever you would normally use in JS to submit the function. Often times it's something like

Putting it in its own function makes it a little big cleaner and easier to use with event listeners. You may or may not need to preventDefault on the event for the button click as well so that it doesn't click immediately. 

How can I prevent it from click immediately? I know I have to use preventDefault, but how do I check if the animation is completed?

[ZachSaucier]

1 hour ago, Bevi87 said:

how do I check if the animation is completed

using onComplete or .then() like my first post said... Is that what you mean?

[Bevi87]

2 minutes ago, ZachSaucier said:

using onComplete or .then() like my first post said... Is that what you mean?

Yes, but it doesn't work.  By the time I click on the button, the form gets sent immediately, without waiting for the animation to be completed.

 

 

[ZachSaucier]

Please provide the code that you're using. It's impossible for us to help blindly. You should have everything that you need in the posts above.

[Bevi87]

25 minutes ago, ZachSaucier said:

Please provide the code that you're using. It's impossible for us to help blindly. You should have everything that you need in the posts above.

Ok code is attached, thanks!

DemoGsap.zip

[ZachSaucier]

In general, you should only include the relevant code. In this case providing just the function is sufficient. 

 

You have:

function runAnimation()
{
    event.preventDefault(); // event will be undefined
    var tl = gsap.timeline();
    tl.to(".imageButton", 
    {
        duration: 2,
        y: -100,
        autoAlpha: 0
                // rotation: 360,
    }, 0)
    
    .to(".imageButton2", {
    autoAlpha: 0
    // rotation: 360,
            }, 0)
            .then(sendForm()); // this is called IMMEDIATELY - not what you want
}

As said in the comments I added in the code above, you have two main errors. You need to pass in the event to the function and pass the function reference instead of invoking the function.

function runAnimation(event) // pass in the event
{
    event.preventDefault(); // event is defined (when called from an event listener)
    var tl = gsap.timeline();
    tl.to(".imageButton", 
    {
        duration: 2,
        y: -100,
        autoAlpha: 0
                // rotation: 360,
    }, 0)
    
    .to(".imageButton2", {
    autoAlpha: 0
    // rotation: 360,
            }, 0)
            .then(sendForm); // this passes in the function reference
}

Note that the above is untested because I'm not going to spin up a server that can interpret PHP files just to test this. We suggest using CodePen to show minimal demos as this thread discusses:

 

I highly recommend reading up on promises if you're going to use the .then() method. I also highly recommend watching some online tutorials about JavaScript scoping, events, listeners, and forms because it's clear that you do not have a solid grasp of what is going on. It will make your job going forward much easier  

 

Side note: your code formatting makes your code very hard to read. I highly suggest using a beautifier and trying to write your code in a cleaned up way like what the code beautifier does. 

[Bevi87]

55 minutes ago, ZachSaucier said:

 

 

 

As said in the comments I added in the code above, you have two main errors. You need to pass in the event to the function and pass the function reference instead of invoking the function.

Note that the above is untested because I'm not going to spin up a server that can interpret PHP files just to test this. We suggest using CodePen to show minimal demos as this thread discusses:

 

I highly recommend reading up on promises if you're going to use the .then() method. I also highly recommend watching some online tutorials about JavaScript scoping, events, listeners, and forms because it's clear that you do not have a solid grasp of what is going on. It will make your job going forward much easier  

 

Side note: your code formatting makes your code very hard to read. I highly suggest using a beautifier and trying to write your code in a cleaned up way like what the code beautifier does. 

Thank you for your feedback, I will take a look at the documentation!
Also, sorry for the indentation, I will use codepen in the future.
Passing the reference worked, the animation now works properly. I just need to figure out how to pass the button value to the form.