Negative Width

[Sean19]

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

[ZachSaucier]

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.

[Sean19]

Thank you so much @ZachSaucier. This is exactly what I needed. Works perfectly.