Jump to content


How can I make width expand and collapse within a few seconds?

Go to solution Solved by PointC,

Recommended Posts

Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far:

gsap.to('.block', {duration: 1, width: 500}, 0.2); 

I know when using keyframes it would be something like this:

@-webkit-keyframes block {
    0% {
        width: 0px
  100% {
        width: 500px

Thank you!

See the Pen Yzpvzrw by just_ja (@just_ja) on CodePen

Link to comment
Share on other sites

  • Solution

So you just want it to expand and then contract a few seconds later? Please try this.


gsap.to(".block", {
  duration: 1,
  width: 500,
  yoyo: true,
  repeat: 1,
  repeatDelay: 3

Is that what you meant?


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Also keep in mind that width is not a performant property to animate. So if you can use scaleX or another way using performant properties (like overflow: hidden on a container and then animating the child's x property) it'd perform better. 

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.