Jump to content
GreenSock

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

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>
<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"});
    }
</script>
</head>


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

Hi,

 

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;">
    <form>
      <label>Company:</label>
      <input name="company"></input>
    </form>
 </div>

Demo:

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.
×