Unable to set starting properties on an HTML form

[garyw]

I have an form that is animating onto the screen using visibility and y properties. It works correctly in GSAP v2. After implementing GSAP v3, the animation no longer works. The starting properties are not getting set. Is there something special about the <form> tag?

 

It is a complex app, so I have not yet created a codepen... it will take some time.

[garyw]

See the Pen bGGyObM by og-elmonty (@og-elmonty) on CodePen

[ZachSaucier]

Looks like you put the autoAlpha part in the from part instead of the to part  

 

gsap.fromTo('#feedback',
  {y:100},
  {y:0, autoAlpha:1} // works just fine
);

 

[garyw]

That was intentional. The form is hidden by default and I want it to appear and then animate. My production code uses visibility:'inherit' rather than autoAlpha:1, but either one does not work with GSAP 3.

[ZachSaucier]

1 hour ago, garyw said:

I want it to appear and then animate.

So you want it to not be there on page load (because it's hidden by CSS), appear immediately when JS is enabled, then fade out? What's the end goal?

 

I do think there is a minor bug related to this though @GreenSock. Check out this demo:

See the Pen BaaeXmO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It fades in whereas I would expect it to just be equivalent to a .set() in terms of the opacity. The y animation also doesn't seem to be applying.

[garyw]

The user triggers the panel with a button. The panel should slide up from the bottom. It is normally hidden and in its proper place. When triggered, it needs to move down below the viewport, turn visible, then slide up. I have the starting Y value set to 100 here just for sake of demonstration.  

 

Please ignore the minor CC border glitches. They are left over from the production code.

 

Again, this worked perfectly with GSAP v2.

[garyw]

Oh and yes, the starting Y value is also not getting set.

[mikel]

Just a test ...

 

See the Pen YzzowwN by mikeK (@mikeK) on CodePen

[garyw]

There's something weird going on with that close button, as well.  After the animation starts, it has a transform applied to it.  If I remove the button, the entire animation works correctly.

[GreenSock]

I found the issue! Very interesting - the <form> element is array-like (it has indexed values, a length property, etc.) so GSAP's toArray() method was attempting to de-nest the target(s) passed in. Sorry about the hassle there - it should be resolved in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js (you may need to clear your cache).