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
MarkBoots
MarkBootsβ€’9mo ago
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.
<div class="wrapper"> <!-- position: relative -->
<div class="animatingheight"></div> <!-- position: absolute; bottom: 0 -->
</div>
<div class="wrapper"> <!-- position: relative -->
<div class="animatingheight"></div> <!-- position: absolute; bottom: 0 -->
</div>
if this doesn't work for you, provide a sample (preferably in a working codepen) so we have more insight
Dovah
Dovahβ€’9mo ago
Will try it as soon as I can! Thanks!
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Use transform-origin: bottom;
MarkBoots
MarkBootsβ€’9mo ago
that will only work with transform properties, not height
Chooβ™šπ•‚π•šπ•Ÿπ•˜
I was thinking of scaleY(). The OP did not provide enough information to determine what kind of height change they wanted.
MarkBoots
MarkBootsβ€’9mo ago
in that case OP's animation wouldnt go downwards but in both directions (default origin is center)
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
Dovah
Dovahβ€’9mo ago
@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!
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
Dovah
Dovahβ€’9mo ago
I just wanted to animate height so that it goes upwards instead of default downwards. And fixing it to the bottom does that.
Want results from more Discord servers?
Add your server