Jump to content
GreenSock

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

How to center an element gaining width?

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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.

:)

  • 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.
×