Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
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 post
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 post
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 post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×