Centering dynamic text

[Cothien]

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

[Diaco]

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%);

[Cothien]

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.

[Carl]

Try this: http://codepen.io/GreenSock/pen/wKMNNN

 

In addition to Diaco's suggestion of xPercent:-50 I added display:inline-block to the #textcontainer.

[Cothien]

Thank you guys for the help. That was it.

 

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