Bevi87

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.

Ok code is attached, thanks! DemoGsap.zip

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.

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?

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>

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, }); }