ScaleY Issue

[Sean19]

Good Evening,

What I am trying to achieve is when you hover over the red rectangle I would like the rectangle to grow upwards and then when you leave the shape, it goes back down. Right now I have been able to make the shape grow but it flips itself and grows past the bottom of the square. I simply want the rectangle to grow straight up to the top of the black square and then back down. Thank you in advance for your help!!!

See the Pen OJPjpyB by joseph19 (@joseph19) on CodePen

[iliketoplay]

Hi, have a look at the transform-origin (css) property. If you set this to "0 100%" it will scale upwards. You can also do this simple animation with css only.

[ZachSaucier]

Hey Sean and welcome.

 

As iliketoplay said, you can do this by setting the transform origin and having it then animating the scale to the appropriate number. We recommend using GSAP because of the increased control that you have including the various easing functions. 

 

I went ahead and used GSAP 3 formatting since you were loading it anyway. I actually recommend creating the tween outside of your hover functions and then toggle the state of that animation in order to make it more smooth:

See the Pen eYmEGOE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can use keywords to set the transform origin like I did: "bottom center" (or "center bottom") is the equivalent of "50% 100%", which is the correct transform origin that you're wanting based on your description.

[Sean19]

Thank you for the help. Exactly what I needed.