I want to smoothly reduce the height of a container to 0. It works if the initial height is an absolute pixel value. However, I cannot make the container an absolute value becaus it will have text content, so considering different screen sizes, the height the content will take up is unknown.
It just jumps from visible to invisible the first time. It seems to then work most of the time after clicking the Show button. But I really need to get a nice sliding transition to work initially. What do I need to do to fix it?
When an element dimension is set to auto, HTML doesn’t know its value. That’s why the first jump. The browser will figure it out after that. That’s why JS is so often needed for motion, because JS only can calculate and return the dimensions of anything at any given time.
The only fix within Webflow would be to change your layout so you can give a fixed height to your shrinking element. I know that’s not the answer you’re looking for…
You’re amazing – i.e. the amount of answers you give in this forum. Vive la France!
Meanwhile I’ve thought of a work-around: I’ve applied an Load trigger interaction to the container, made its initial appearance 0 height, and then transition to auto with 0 transition time. Now it collapses smootly
