Animate the height and width of a div from center.

[Aizy 5 Likes (Newbie)]

I am trying to replicate the button (watch how it works button) animation on this site: iBuyer.com | Sell Your House Fast With An Instant Cash Offer. .
I tried animating the width and padding but I'm unable to trigger the animation from the center, mine starts from the corner as you can see. Also I am having trouble creating the first part of the animation which I believe is height being animated from 0 to something like a 100.

 

P.S. I've added setTimeout to delay the second animation (the center text), which should only get trigger once the first two phases of the animation are completed.

See the Pen LYQqbdL by Aizazulhaq (@Aizazulhaq) on CodePen

[SteveS 177 Likes (Specialist)]

Animate scale, not padding. Set the transform origin to center. You are also using TweenMax. It's recommended that you upgrade to a more recent version of GSAP and use current conventions for writing tweens.

Here's a codepen:

See the Pen ExQrWRz by SteveSDaBest (@SteveSDaBest) on CodePen

[Aizy 5 Likes (Newbie)]

@SteveS I've edited the codepen and added gsap.fromTo and I'm animating scale instead of padding. Now it's animating from the center but not quiet the way I want it to. I want it to expand from the center. 

[SteveS 177 Likes (Specialist)]

It is expanding from its center, unless I'm not understanding.

[GreenSock 18,251 Likes (Superhero)]

11 minutes ago, Aizy said:

@SteveS I've edited the codepen and added gsap.fromTo and I'm animating scale instead of padding. Now it's animating from the center but not quiet the way I want it to. I want it to expand from the center. 

Can you elaborate? I'm in the same boat as @SteveS - it's doing exactly what I'd expect. Are you saying you want it to expand from the "center" of something else rather than itself? 

 

You never need a setTimeout() with GSAP - you can simply set a delay on the animation or put it into a timeline where you can easily choreograph timings with the position parameter. 

 

Here's an option with a timeline: 

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

[PointC 14,183 Likes (Superhero)]

I think @Aizy is referring to the updated pen in which scale has been used rather than scaleX and/or scaleY.

 

@Aizy see how @SteveS has used a combination of scaleY and then scaleX to achieve the desired outcome? You'll also want to remove that scale(0) in your CSS. 

 

Happy tweening.

[Aizy 5 Likes (Newbie)]

@SteveS, @GreenSock I was referring to my edited code pen where I used `scale` instead of `scaleX` and `scaleY`. The solution @SteveSprovided works the way I want. and I have marked it as a solution. Thank you.