Jump to content


Input breaks animation of a form

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 there!


My animation works as long as the line <!--<input name="company">--> 

is commented out. 


When it is uncommented, the form isn't tweened anymore, but input is.


I don't know what to think, really..

<!doctype html><html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    window.onload = function(){
        var h1 = $("#h1");
        var form = $("#formOrder");
        var tl = new TimelineMax();
        tl.from([h1, form], 3.5, {rotationX:90, transformOrigin:"50% 0", ease:"Back.easeOut"});

<div id="body">
    <h1 id='h1'>Info</h1>
    <form id='formOrder' style='width:300px; height: 200px; background: #eee;'>
        <!--<input name="company">-->
Link to comment
Share on other sites



Thanks for providing the code, it was a big help.

Yes, I was able to simulate that weirdness in Chrome.


The solution I found was to wrap the form in a div. Animate the parent div, not the form directly:



<h1 id="h1">Info</h1>
  <div id='formOrder' style="width:300px; height: 200px; background: #eee;">
      <input name="company"></input>


See the Pen 533d7782431a99b720932ae79edd536c by GreenSock (@GreenSock) on CodePen



Technically, I would think animating a form would not be problem as it is just a block-level element, but perhaps browsers handle them differently some way.


Someone else around here might have more insight. For now, I hope my solution is satisfactory.

  • Like 1
Link to comment
Share on other sites

Thank you very much, your solution worked for me just fine. )

Link to comment
Share on other sites

Yes, oddly this is browser issue. I tried to animate form with GSAP/jQuery and had problems with both in Chrome/Safari. Wrapping it in container element forks fine. 

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.