Jump to content
Search Community

How to center an element gaining width?

Makaak test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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:

 

 

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:

 

 

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

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