Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Negative Width

Recommended Posts

Hello. I am new to GSAP and have quick question. In the codepen I have provided I am trying to make it so one of the boxes (the black one) grows to the right, using the width property. I was able to do this. But now I would like the gold box to grow to the left by the same amount. I tried using the width property and using negative values but this did not work. 

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

Share this post

Link to post
Share on other sites

Hey Sean and welcome to the GreenSock forums!


You can't have a negative width value, it doesn't make sense. With that being said, what you're trying to do does make sense. There are several different approaches that you could take. If these rectangles don't have content within them, I'd recommend using transforms to affect these elements. You should also set the transform-origin for both of them to their leftmost and vertically centered point.


See the Pen oNNqZaa by GreenSock (@GreenSock) on CodePen


As a side note, you should look into using a CSS class for elements that are similar like this. That way you can apply common styles to multiple elements.

  • Like 4

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.