Input breaks animation of a form

May 21, 2013

Hi there!

My animation works as long as the line

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>

May 21, 2013

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.

May 23, 2013

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

May 23, 2013

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.

Notifications

Messages

Input breaks animation of a form

Warning: Please note

Recommended Posts

Andrei

Carl

Andrei

Chrysto

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members