It works, but it would be nice if I could get it to move as smoothly as the animated ‘Learn More’ reveal action above it on the page.
The footer setup is using the same approach and order of actions as the Learn More setup. The main container of the footer is animated to Hide → Show and Size:height:0 → Size:height:auto And the inner content has a delayed Opacity action on it. It’s pretty simple, but for some reason it does not have the same smooth opening action as the Learn More and snaps shut when closing.
I have a suspicion that the footer action Size:height:auto has something to do with it, but I can’t change this as it’s set to work responsively.
I haven’t looked at your read only link yet but Imay have fiigured out why you don’t get the smooth unfolding animation you’re after. Read this and tell me if it’s right.
Your IX is passing an element that’s 0 height to n pixels height. You want it to grow smoothly instead of going from 0 to n.
To do that, HTML/the browser needs to know the height of the panel when it’s open. And by setting it to 0 by default, it will never know it. You set the size at 0 in the IX probably but it’s already 0, and you target 100% or auto, but the target height is unknown to HTML.
So, the strategy is this:
design your page with the panel open, with a defined height or 100%, or nothing (sized by the content, the best solution).
make your IX to zero the height of the panel as initial state. So the panel will appear to oad at 0 but HTML will know the size it’s supposed to have, because in fact it loaded open and html had the time to calculate its height before being zeroed by IX initial state.
Thanks for your attention to this (have only just got around to being able to act on it). I’m pretty much doing what you’ve suggested there (I think?), but it doesn’t go smooth on closing. The div being animated has height:auto, minimum:700. Initial state height:0, grows to height:auto