Jump to content


scaling a panel height in up dir from bottom

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?


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

Link to comment
Share on other sites

  • Solution

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.




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.



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.