Jump to content


Centering dynamic text

Go to solution Solved by Carl,

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

Sorry if this is basic or what not, I am a complete newbie. Tried a few things and mutilated the css.


I have a simple timeline where a div with text moves in from the left to the screen. I am trying to center that text so the middle of the text is in the middle of the screen no matter how long the text is. Since the text can be different length, the center of the text can be in different locations.


Tried with some percentages, but that caused some text to be off screen or misaligned.


I didn't know if there was a easy way to do that within the timeline animation or if it would have to be done in JS.

See the Pen BojOwR by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi Cothien :)


you can add   xPercent:-50   to your tween   or   add this to your text css :

-webkit-transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
transform: translate(-50%,0%);
  • Like 2
Link to comment
Share on other sites

Hey Diaco,


I had tried to add the xPercent to the tween, but did not get it to center the text. There is probably conflict with the css for the text container div. Broke it few time, but not sure what to do to fix it so the text will center.

Link to comment
Share on other sites

Thank you guys for the help. That was it.


strayed a little from the example I was learning, but was worth it

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.