[Simple timeline question: continue repeat: -1 loop?]

I have a very simple question and made a codepen to demonstrate.

I have a timeline with 2 tweens. First changes autoAlpha to 1 and has infinite repeat, second one moves y: 150 down. My timeline doesn't jump to the second tween since first one has repeat: -1.

 

How can i make it jump down to next tween while keeping the infinite repeat running?

 

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

[How to center an element gaining width?]

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?

 

 

[How to center an element gaining width?]

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