How to center an element gaining width?

[Makaak 0 Likes (Newbie)]

I'm trying to make a line appear my text which starts from width: 0 and expands to the width of the text.

 

The way it works currently is it starts from the left (width: 0) and expands all the way to the right (width: 100%).

 

The way i want it to work is: It starts from the center and expands to the left and to the right until it reaches width of text.

 

How can you do this?

See the Pen qrpvxG by PointC (@PointC) on CodePen

[PointC 14,465 Likes (Superhero)]

Hi Makaak 

 

Welcome to the GreenSock forum.

 

There would be several ways to make that happen. I think the easiest would be to add a position:relative to your .line and then adding the following to the JS:

TweenMax.set(line, {left:"50%", xPercent:-50});

Here's a fork of your pen:

 

See the Pen qrpvxG by PointC (@PointC) on CodePen

 

Happy tweening.

[Makaak 0 Likes (Newbie)]

Hi Makaak 

 

Welcome to the GreenSock forum.

 

There would be several ways to make that happen. I think the easiest would be to add a position:relative to your .line and then adding the following to the JS:

TweenMax.set(line, {left:"50%", xPercent:-50});

Here's a fork of your pen:

 

See the Pen qrpvxG by PointC (@PointC) on CodePen

 

Happy tweening.

 

Thanks! it worked!

 

What is happening here? An invisible wall pushing from both sides? Like with margin: 0 auto; , because the effect of the flex center gets removed when an element gets animated?

 

 

[PointC 14,465 Likes (Superhero)]

I'm just using the very handy xPercent (& yPercent) for centering purposes. Check out Carl's blog post for all the cool details:

 

https://greensock.com/gsap-1-13-1

 

Happy tweening.