Looking for some help creating this stagger text animation

[birdyoung]

Hi guys,

I'm still learning GSAP! Trying to create a similar animation to this - https://imgur.com/hYAgkHb

Basically I'm trying to animate each word in, but keep the new word in the middle of the window and sort of push the previous word back and then the entire thing will just fade out. The example doesn't demonstrate the keeping each word in the middle part that I'm after, not sure if possible with GSAP?

 

Not sure where to start... I've spent some time trying to find any examples of someone doing something similar here on GreenSock but haven't had any luck. 

 

Any help is appreciated! Cheers

 

Edit: I've added a codepen to show what I have so far. I've added some CSS to sort of center the text to the last word, a little dodge.. not sure if this is the best way to do it. 

I have it adding each word in the timeline with the display property. I now need to highlight the current word. So when a word is added I want that word to be white (opacity 1) and the other words grey (opacity 0.5), not sure how to do that though 

 

Edit2: I've made some more changes to the code pen. Still not sure how to correctly keep the last word centered, if anyone can help?

See the Pen mdLQera by mattmcgilton (@mattmcgilton) on CodePen

[Trapti]

Hey, 

You can calculate last words width then half of it you can move to make it exact center. Also don't use display none to hide elements use visibility.
Here is my pen, I have used splitText plugin because that makes life easy . But your way doing it manually is also perfectly fine.  Hope this helps

 

See the Pen NWMErdW by tripti1410 (@tripti1410) on CodePen