Best way to animate height increase upwards?
Basically for animation of the element to start from the bottom towards top, instead the default that goes downwards?
One solution I saw is to set overflow:hidden; to the body and hide element outside of the viewport, but it creates responsive problems on certain screen sizes.
10 Replies
without seeing any example code:
put the element in a wrapper and make it positioned absolute with a bottom of 0. When you then animate the height, it will go upwards.
if this doesn't work for you, provide a sample (preferably in a working codepen) so we have more insight
Will try it as soon as I can! Thanks!
Use transform-origin: bottom;
that will only work with transform properties, not height
I was thinking of scaleY(). The OP did not provide enough information to determine what kind of height change they wanted.
in that case OP's animation wouldnt go downwards but in both directions (default origin is center)
I saw " start from the bottom towards top". Setting the transform origin to bottom, makes it go up, which sounds like going from bottom towards top. It does not expand in both directions when set with a bottom origin. The default is in both directions when it's center origin.
@MarkBoots @ChooKing Marks idea worked, but it is the first time I heard about transform-origin: bottom; so I will test it out if I have time. Thank you both!
I still don't know what kind of effect you wanted to have. Mark's solution doesn't do the exact same thing as mine. Mark's solution changes the size of the container without distorting the contents. Mine scales the contents along with the container.
I just wanted to animate height so that it goes upwards instead of default downwards. And fixing it to the bottom does that.