I went down a rabbit hole trying to animate a form by having it expand when a loading state was shown.

I wanted it to animate so I did not just want to use display block/display none

As a side note display block hides an element from the UI but does not remove it from the DOM.

Visibility hidden makes an element invisible but it will still occupy space in the layout.

Display block works great but it’s not good for animating. If you use visibility hidden the element will still occupy space in the layout

So I tried to animate using scale to essentially give the element no height. The element still occupied empty space in the layout. So you animated zero height but your space is still there.

But it’s got to be possible, we see this all the time especially with mobile menus.

Well one way is to add a container div set it to relative and make the items you’re trying to scale position absolute.

Now animating the parent’s scaleY The space will not be preserved and you will get the desired effect.

Not a huge fan of absolute positioning but it works.