Jump to content
Search Community

Animate the height and width of a div from center.

Aizy test
Moderator Tag

Go to solution Solved by SteveS,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
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.
  • Create New...