General Strategy for animating dynamic content

[jschins]

I have had some functions in my project to animate some forms from opacity / height 0 to to opacity: 1 height: auto when a new form appears on the screen.  These forms have always had static content so I could time things correctly in my functions.  We now want to try to apply this type of animation to forms that have a configurable number of fields so the size of the form will be unknown.  I'm wondering if calculating the height of the element and then applying a modification to the time component in the animation would be a standard way people do this or if there is some standard way of doing this I have not encountered.  Thanks for any help!

[ZachSaucier]

Hey jschins. In GSAP 3, you should be able to animate to a height value of auto without issue. If you're having trouble getting this working, can you please setup a minimal demo in a CodePen? This thread talks more about how to do so:

 

[ZachSaucier]

The only potential issue I could foresee with height: auto is if you create the tween at one point but wait to call it. If the element's height changes between when it's created and when the tween is ran it would animate to the old (cached) value.

[jschins]

I think my issue is the timing relationship between how long it takes to animate the height vs how long it takes to animate the opacity to 1.  It seems like the height of the element plays a part in the animation looking smooth / good.  I'm not sure why though, if the amount of time it takes to animate the height stays the same it seems like the height and opacity relationship should stay constant and not degrade as the height increases.  I'll work on creating a code pen, I just wasn't sure if this was a common topic / problem in the animation community.

[PointC]

You could certainly wire it up with a duration relative to the height of the container. Just use a formula of so many seconds for so many pixels of height and you'll be all set.

 

As far as opacity not looking smooth, you may be seeing the effect of a bad ease for opacity. I almost always use a linear ease on opacity or color changes. IMHO they just look weird with some kind of power ease.  You may need to just use separate tweens for the height and opacity to get the look and feel to your liking. Just my two cents worth of rambling. Happy tweening.