Using SplitText to animate from center out?

[decotii 0 Likes (Newbie)]

Hi!

 

New to Greensock, but very much impressed with the tools - this stuff is truly incredible. 

 

I'm hoping to get some help with a text animation I am creating using SplitText. I would like to animate the text from the center of the sentence out (as seen in attached gif). Can anybody help point me in the right direction on this?

 

So far, I've been able to create a similar effect using:

 

'TweenMax.staggerFrom(mySplitText.chars, 0.6, {y:100, autoAlpha:0, ease: Circ.easeOut}, 0.05);'

 

However, that is not exactly the effect I am looking for. Is there anything inn particular I should be looking at to create this effect? Possibly leveraging TimelineMax for the animation timing functions?

 

See the Pen yNeGyY by DeCotii (@DeCotii) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi decotii 

 

pls check this out : 

See the Pen OVqBBq by MAW (@MAW) on CodePen

[Carl 9,066 Likes (Superhero)]

Nice work, Diaco. Clever solution. I don't think I would have done it so elegantly.

[decotii 0 Likes (Newbie)]

Very nice, Diaco! This is exactly what I was looking for.

 

You all rock, appreciate the timely response and elegant solution. Do you mind elaborating a bit on what this code is doing? Would love to learn about the details here. 

[funkybudda 10 Likes (Newbie)]

Hi decotii 

 

pls check this out : 

See the Pen OVqBBq by MAW (@MAW) on CodePen

 

hi,

 

the codepen link no longer works, would you be kind to post it again?

[Diaco 1,948 Likes (Superhero)]

Hi funkybudda 

 

Sorry about that , pls check again : 

See the Pen OVqBBq by MAW (@MAW) on CodePen