scaling a panel height in up dir from bottom

[dneckles]

 

Hey everyone,

 

I'm trying to create a sliding door effect on a responsive webpage and i cant get the bottom door to expand in the up direction.

Ive tried setting the transform origin to be center bottom but no luck.

 

Below is the codepen, let me know if I'm missing something?

Thanks 

See the Pen vgQagv by dwayneaneckles (@dwayneaneckles) on CodePen

[OSUblake]

I have no idea what this is supposed to look like. Do you have an example?

 

And do you want to scale it or change its height? Those are 2 totally different things. Height is not a transform, so it doesn't have a transform origin. But that doesn't mean you can't make it animate like that. Just counter it. Whatever the change in height is, just translate it in the opposite direction. Every action has an equal and opposite reaction, right?

 

See the Pen 5836dbde75c6015fb700dcfd0b9eda5e by osublake (@osublake) on CodePen

[dneckles]

Hey Blake,

 

Good points – I will try countering. and i forgot that transform-origin doesn't affect height at all just scaleX. Lol.

I attached is what the desired behavior should be but I think i have the answer now.

 

Thanks!

 

Edit: In addition to what Blake mentioned above 

I just found that when you set the position of the div using bottom: XXpx for some reason it treats the bottom part of the div as the anchor it animates from.

 

Yet when you set the y pos using top: XXpx , it treats the top as the anchor that it animates from which I thought was interesting.

Thanks for the codepen as well, Blake.