SplitText Animation

[Gourav Mukhija]

Hello everyone,
I am new to GSAP forum and need some help for SplitText animation .

e.g.
I am trying to showcase Banner Text Line by line where each word is appearing once line is completely visible on screen and words in line follow some delay as per line index (e.g. x * lineIndex + y * wordIndex) and alpha value for words need to change from 0 to 100%.

It would be very helpful if someone can guide me how to do this.

Thanks,

See the Pen PoxxbxQ by Gourav-Makhija (@Gourav-Makhija) on CodePen

[GreenSock]

I'm not really sure how you want the timings to work, but maybe this will get you going in the right direction: 

See the Pen NWEeadv?editors=0010 by GreenSock (@GreenSock) on CodePen

[Gourav Mukhija]

Hi @GreenSock,

Thank you quick response, Above demo is really very helpful. But still I am facing one issue
e.g.
In given updated pin  

x: -80 and x: 0 for lines I am trying to change.
Actual: When user click  on "Animate Text" button then line first move to x: -80 px and then start words animation where words are appearing by fade effect.
Expected: When user click  on "Animate Text" button then line need to appear with word by word fade out text effect and once all the words get displayed on screen only then line need to move from position to 80px right.

Thanks in Advance.

[Rodrigo]

Hi,

 

I'm not 100% sure of what you're trying to do here but I believe you are overcomplicating this a bit.

 

Maybe this example is closer to what you're trying to achieve:

See the Pen YzRdMmo by GreenSock (@GreenSock) on CodePen

 

If not, please be as explicit as possible about the effect that you're tying to get.

 

Finally there is no need to combine both opacity and visibility, GSAP has autoAlpha which is a combination of both.

 

Hopefully this helps.

Happy Tweening!

[Gourav Mukhija]

Thanks @Rodrigo, It is really very helpful.