jschins Posted May 31, 2020 Share Posted May 31, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 31, 2020 Share Posted May 31, 2020 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: 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 31, 2020 Share Posted May 31, 2020 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. 1 Link to comment Share on other sites More sharing options...
jschins Posted May 31, 2020 Author Share Posted May 31, 2020 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. Link to comment Share on other sites More sharing options...
PointC Posted June 1, 2020 Share Posted June 1, 2020 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now