Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alwayzambitious

scaling a panel height in up dir from bottom

Recommended Posts

 

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

post-5947-0-62179500-1486839381_thumb.jpg

post-5947-0-53136900-1486839394_thumb.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×